0

2つの画像を表示/非表示にするための2つのボタンまたは2つのタグまたはリンクが必要ですが、互いに独立しています。1つの画像をコーディングしましたが、htmlで2回設定すると機能しません。JSFiddleを参照してください。

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

3 に答える 3

0

あなたは単に使用することができます

style.display == 'block'
画像をブロックするか使用する

style.display == 'none'

あなたが理解できるように、私はあなたに完全な例を示しています..

<html>
<body>

<h1>What Can JavaScript Do?</h1>
<div id="myDiv">
	<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">
	function LightOn(){
		document.getElementById('myImage').src='pic_bulbon.gif'
	}
	
	function LightOff(){
		document.getElementById('myImage').src='pic_bulboff.gif'
	}
	
	function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
        else
          e.style.display = 'block';
	}

</script>

</body>
</html>

于 2016-11-19T21:04:13.610 に答える