26

我有一个带有图片的 HTML 页面，我将其设置为 CSS 不可见visibility: hidden。我想创建一个名为“显示图像”的链接，这样当我点击它时，图像就会出现。

现在，我不知道如何建立这样的链接，因为通常是<a href=...>链接到其他页面的链接。就我而言，我希望链接调用 JavaScript 来显示图像。

4

6 回答 6

52

如果你已经showImage定义了一个 JavaScript 函数来显示图像，你可以这样链接：

<a href="javascript:showImage()">show image</a>

如果您需要帮助定义函数，我会尝试：

function showImage() {
    var img = document.getElementById('myImageId');
    img.style.visibility = 'visible';
}

或者，更好的是，

function setImageVisible(id, visible) {
    var img = document.getElementById(id);
    img.style.visibility = (visible ? 'visible' : 'hidden');
}

然后，您的链接将是：

<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
于 2013-03-10T02:54:06.780 回答
6

这很简单。

HTML：

<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>

JavaScript：

document.getElementById("showImage").onclick = function() {
    document.getElementById("theImage").style.visibility = "visible";
}

CSS：

#theImage { visibility: hidden; }
于 2013-03-10T02:56:03.157 回答
3

你可以用 jquery 做到这一点，只需访问http://jquery.com/以获取链接，然后执行类似这样的操作

<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#show_image').on("click", function(){
         $('#my_images').show('slow');
      });
   });
</script>

或者如果您希望链接打开和关闭图像，请执行此操作

<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#show_image').on("click", function(){
         $('#my_images').toggle();
      });
   });
</script>
于 2013-03-10T02:58:31.187 回答
3

这是工作代码：

<html>
  <body bgcolor=cyan>
    <img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
    <script type="text/javascript">
      function tend() {
        document.getElementById('my').style.visibility='visible';
      }
      function tn() {
        document.getElementById('my').style.visibility='hidden';
      }
    </script>
    <input type="button" onclick="tend()" value="back">
    <input type="button" onclick="tn()" value="close">
  </body>
</html>
于 2015-04-27T05:55:34.777 回答
2

这是一个工作示例：http: //jsfiddle.net/rVBzt/（使用 jQuery）

<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">

<a id="toggle">click to toggle</a>

img {display: none;}

a {cursor: pointer; color: blue;}

$('#toggle').click(function() {
    $('#tiger').toggle();
});
于 2013-03-10T02:57:50.313 回答
0

HTML

<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>

JavaScript：

document.getElementById("showImage").onclick = function() {
    document.getElementById("theImage").style.display = "block";
}

CSS：

#theImage { display:none; }
于 2016-11-29T03:54:36.777 回答