Html 使用 JavaScript 显示/隐藏图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15318357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide image with JavaScript
提问by Mika H.
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
我有一个 HTML 页面，其中包含我设置为 CSS 不可见的图像visibility: hidden。我想制作一个名为“显示图像”的链接，这样当我点击它时，图像就会出现。
Now, I don't know how to make such a link, since normally a link with <a href=...>links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
现在，我不知道如何建立这样的链接，因为通常是一个<a href=...>链接到其他页面的链接。就我而言，我希望链接调用 JavaScript 来显示图像。
回答by wchargin
If you already have a JavaScript function called showImagedefined to show the image, you can link as such:
如果你已经showImage定义了一个 JavaScript 函数来显示图像，你可以这样链接：
<a href="javascript:showImage()">show image</a>
If you need help defining the function, I would try:
如果您需要帮助定义函数，我会尝试：
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
或者，更好的是，
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
然后，您的链接将是：
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
回答by railgun
It's pretty simple.
这很简单。
HTML:
HTML：
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
JavaScript：
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
CSS：
#theImage { visibility: hidden; }
回答by iConnor
You can do this with jquery just visit http://jquery.com/to get the link then do something like this
您可以使用 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>
or if you would like the link to turn the image on and off do this
或者如果您想要打开和关闭图像的链接，请执行此操作
<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>
回答by user4836357
This is working code:
这是工作代码：
<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>
回答by ktm5124
Here is a working example: http://jsfiddle.net/rVBzt/(using jQuery)
这是一个工作示例：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();
});
回答by Dream Hunter - hashADH
HTML
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
JavaScript：
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
CSS：
#theImage { display:none; }
