使用JavaScript显示/隐藏图像

Question

我有一个HTML页面,其中包含我设置为CSS不可见的图像visibility: hidden.我想创建一个名为"显示图像"的链接,这样当我点击它时,图像就会出现.

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

Answer 1

如果您已经showImage定义了一个名为show的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>

Answer 2

这很简单.

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