时间戳

首页 > 解决方案 > 在哪里以及如何在我的 html 页面中放置图片关闭按钮

html - 在哪里以及如何在我的 html 页面中放置图片关闭按钮

问题描述

我被困住了。我有一个网站，人们可以在其中查看我的列表，并且可以单击代码并在之后打开的窗口中查看更大的图片。我希望这张更大的图片在右边的某个地方有一个关闭选项（“X”）。并且在我的 HTML 页面中找不到执行此操作的位置。

有谁能帮助我吗？

谢谢！托马斯http://www.patentesantiguas.com.ar/galeria/repetidas.html

标签： html

解决方案

你的网站真的很有趣。是老式车牌吗？我可以推荐的是链接到另一个 html 页面而不是 jpeg 图像并在新选项卡中打开 (target="_blank")。还将图像名称附加到 url，以便您可以将图像文件名添加到 javascript 变量中。

<a target="_blank" href="yourimageviewer.html?currentimage=yourlicenseplateimagenamehere.jpg">

在指向新页面的 html 链接之后，使用问号传入要显示的图像的变量。

在目标页面（“yourimageviewer.html”）上，您可以使用 javascript 获取图像名称变量并显示在带有 x 的页面上以关闭它。由于文件名是一个变量，您只需输入所有不同文件的链接，而不是为每个页面创建查看器。

<!DOCTYPE html>
    <html>
    <head>

    </head>
    <body>
        <button onclick="closeWindow()">X</button>
        <img id="currImage" src="defaultImage.jpg"  height="100%" width="100%">


       <script>
        <!--BELOW GETS VARIABLE FROM URL-->


 function getPictureName() {
            var pictures = {};
            var urlVariables = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
                pictures[key] = value;
            });
            return pictures;
        }

        var image = getPictureName()["currentimage"];
        var path = "yourimagepath/"
        document.getElementById('currImage').src = path + image;



        function closeWindow() {
          window.close();
        }


        </script>



    </body>
    </html>

推荐阅读