用JavaScript显示/隐藏图像 [英] Show/hide image with JavaScript

问题描述

我有一个HTML页面，其中有一个图像，我设置为CSS visibility：hidden 不可见。我想制作一个名为显示图像的链接，这样当我点击它时，图像就会出现。

现在，我不知道如何创建这样的链接，因为通常链接为< a href = ...> 链接到其他页面。在我的情况下，我希望链接调用JavaScript来显示图像。 解决方案

showImage 定义为显示图片，您可以链接为：

  < a href =javascript：showImage（）>显示图片< / a> 
  

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

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

或者，更好的是，

 函数setImageVisible（id，visible）{
 var img = document.getElementById（id）; 
 img.style.visibility =（可见？'可见'：'隐藏'）; 
} 
  

然后，您的链接将为：

 < a href =javascript：setImageVisible（'myImageId'，true）> show image< / a> 
< a href =javascript：setImageVisible（'myImageId'，false）>隐藏图片< / a> 
  

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.

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.

解决方案

If you already have a JavaScript function called showImage defined to show the image, you can link as such:

<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>

这篇关于用JavaScript显示/隐藏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！