用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顯示/隱藏圖像

回答

相關問題