用JavaScript显示/隐藏图像

我有一个HTML页面，图像被设置为CSS visibility: hidden不可见。我想制作一个名为“显示图像”的链接，这样当我点击它时，图像就会出现。用JavaScript显示/隐藏图像

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

2013-03-10 Mika H.

如果你已经有一个名为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-10 02:54:06 wchargin

是的，但是内联JavaScript有点不赞成这些天：内容+呈现的分离。 – ktm5124 2013-03-10 03:01:30

这很简单。

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-10 02:56:03 railgun

不会滚动到页面顶部吗？ – wchargin 2013-03-10 02:58:12

此外，[显然'href =“＃”'是不好的做法]（http://stackoverflow.com/a/2800245/732016）。 – wchargin 2013-03-10 02:58:53

这里是一个工作示例：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-10 02:57:50 ktm5124

您可以用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-10 02:58:31 iConnor

这是工作代码：

<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-27 05:55:34 user4836357

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-29 03:54:36

用JavaScript显示/隐藏图像

回答

相关问题