イメージを表示/非表示にするには、htmlでボタンを取得するにはどうすればいいですか？

私は2を表示/非表示にするには2 ボタンを持っているか、ただ2つのタグを持っていますが、互いに独立しています。画像を1つにコーディングしましたが、設定しても機能しません。2度JSFiddleを参照してください。イメージを表示/非表示にするには、htmlでボタンを取得するにはどうすればいいですか？

HTML：

<html> <head> <title></title> </head> <body> <p><img height="600" id="map_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> <input id="Mapred" onclick="showImg()" type="submit" value="Mapred" /></p> <p><img height="800" id="map_img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg/800px-Sandro_Botticelli_-_La_nascita_di_Venere_-_Google_Art_Project_-_edited.jpg" style="display: none;" width="502" /> <input id="Map" onclick="showImg2()" type="submit" value="Map" /></p> </body> </html>

出典

2016-11-19 htmandvbscript

あなたが働いてコードを共有することはできますか？ –

[Jquery：1つのボタンでメニューを表示/非表示]（0000000000） –

これを 'style .display = "none"; 'and' "block;" 'そうでなければ –

imgタグ内id="map_img"とsrc...の間にスペースを挿入して、ファイル名に冗長なスペースがあります。

は

function showImg() { 
 
     document.getElementById("map_img").style.display = ""; 
 
    }

<p> 
 
    <img height="600" id="map_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 
 
    <input id="Map" onclick="showImg()" type="submit" value="Map" /> 
 
    </p>

出典

2016-11-19 20:35:57 Banzay

これは何が必要ですか？私はあなたの質問を完全に理解していないので。

function showImg() { 
 
    document.getElementById("map_img").style.display = ""; 
 
} 
 

 
function showImg2() { 
 
    document.getElementById("map_img2").style.display = ""; 
 
}

<p><img height="600" id="map_img"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 
 

 
<input id="Map" onclick="showImg()" type="submit" value="Map" /></p> 
 

 
<p><img height="600" id="map_img2"src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Hsi-h000.png/600px-Hsi-h000.png" style="display: none;" width="600" /> 
 

 
<input id="Map" onclick="showImg2()" type="submit" value="Map" /></p>

出典

2016-11-19 20:36:36

はJavaScript

function showImg() { 
      document.getElementById("map_img").style.display = "block"; 
     } 
function hideImg() { 
     document.getElementById("map_img").style.display = "none"; 
    }

jQueryの

私はポストのためのjQueryのタグを見てきた、それは高速ですから、私はJavascriptを推薦し、 JQueryをロードする必要はありませんが、それでも。

あなたは、単にあなたができるので、私はあなたに完全な例を示しています任意の画像をブロックしたり、

style.display == 'none'

を使用する

style.display == 'block'

を使用することができます

$("#map_img").toggle(); 
$("#map_img").hide(); 
$("#map_img").show(); 
For map_img: 

$(document).ready(function(){ 
    $("#button-link").click(function(event){ 
    //Your actions here 
    }); 
});

出典

2016-11-19 20:57:43 Nicholas

国連derstand ..

<html> 
 
<body> 
 

 
<h1>What Can JavaScript Do?</h1> 
 
<div id="myDiv"> 
 
\t <img id="myImage" src="pic_bulboff.gif" style="width:100px"> 
 
</div> 
 

 

 
<button onclick="LightOn()">Turn On</button> 
 

 
<button onclick="LightOff()">Turn Off</button> 
 

 
<button id="button" onclick="toggle_visibility('myDiv')">Toggle</button> 
 

 

 
<script type="text/javascript"> 
 
\t function LightOn(){ 
 
\t \t document.getElementById('myImage').src='pic_bulbon.gif' 
 
\t } 
 
\t 
 
\t function LightOff(){ 
 
\t \t document.getElementById('myImage').src='pic_bulboff.gif' 
 
\t } 
 
\t 
 
\t function toggle_visibility(id) { 
 
     var e = document.getElementById(id); 
 
     if(e.style.display == 'block') 
 
      e.style.display = 'none'; 
 
     else 
 
      e.style.display = 'block'; 
 
\t } 
 

 
</script> 
 

 
</body> 
 
</html>

出典

2016-11-19 21:04:13

htmlで2回設定できますか？（その後、2つの画像のために6つのボタンを取得します – htmandvbscript

はい、あなたはそれを行うことができます.. –

イメージを表示/非表示にするには、htmlでボタンを取得するにはどうすればいいですか？

答えて

関連する問題