單擊按鈕時出現圖像

單擊提交按鈕時如何顯示隱藏圖像？單擊按鈕時出現圖像

2011-05-20 Bryan

你是如何隱藏的形象呢？你使用的是像jQuery，Mootools或Prototype這樣的javascript框架嗎？ – 2011-05-20 07:39:55

這將取決於你如何隱藏它。最簡單的方法是將圖像的類名從隱藏的圖像類改爲不隱藏的類。

<img src="thesource" class="hidden"> 

document.getElementById("theid").className = ""; // remove the hidden class. 


.classHidden { 
    display: none; 
}

來源

2011-05-20 07:40:39 John

你很幸運，我有一個空白的HTML頁面準備：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
    <meta charset="utf-8" /> 

    <title>Test</title> 

    <style type="text/css"> 
     .hidden { 
     display: none; 
     } 
    </style> 
    </head> 

    <body> 
    <form> 
     <input type="submit" id="submit" onclick="document.getElementById('hidden').style.display = 'block';" /> 
    </form> 

    <img id="hidden" class="hidden" src="foo.png" /> 
    </body> 
</html>

來源

2011-05-20 07:40:50 Blender

document.getElementById("submitBtn").onclick = function() { 
document.getElementById("imageTag").style.display="block"; 
return true; 
}

來源

2011-05-20 07:41:44 Amareswar

下面是一個例子

<img class="image_file src="image.jpg" /> 
<input type="submit" id="submit_button" name="submit_button" />

隱藏在CSS中的圖片：

.image_file 
{ 
display:none; 
}

使用jQuery：

$('#submit_button').click(function(
    $('.image_file').show(); 
));

，並儘量避免內嵌的JavaScript，它的混亂和難以維持，當你有一個大的網站。

來源

2011-05-20 07:42:18 Christophe

使用jQuery：

<img id="image1" src="myimage.jpg" style="display:none;" width="120" height="120"/> 

<input type="submit" name="submit" value="submit" onclick"$('#image1').show()"/>

來源

2011-05-20 07:43:18

單擊按鈕時出現圖像

回答

相關問題