私はボタンが押されたときの画像を作るために、次のコードを使用していボタン

を用いた画像表示/非表示にする方法：私はボタンが押されたときの画像を作るために、次のコードを使用していボタン

<html> 
<head> 
<title>Image Display Test</title> 
<script type="text/javascript"> 
<!-- 
    function showImage(){ 
     document.getElementById('loadingImage').style.visibility="visible"; 
    } 

--> 
</script> 
</head> 
<body> 
    <input type="button" value="Show Button" onclick="showImage();"/> 
    <img id="loadingImage" src="pickups1.png" style="visibility:hidden"/> 
</body> 
</html>

をこれまでのところ、それは動作しますが、その後、画像が上に残っています画面をクリックしても画像が消えるようにするにはどうしようもありませんか？

出典

2016-08-06 ASA2k

あなたはそれに応じて表示/非表示、画像が表示されているかどうかを確認することができ：

var elem = document.getElementById('loadingImage'); 
if (elem.style.visibility === 'visible') { 
    elem.style.visibility = 'hidden'; 
} else { 
    elem.style.visibility = 'visible'; 
}

またはショートカット（テルネ演算子）を使用して：

var elem = document.getElementById('loadingImage'); 
elem.style.visibility = elem.style.visibility === 'visible' ? 'hidden' : 'visible';

出典

2016-08-06 10:42:29 madox2

このコード

<html> 
<head> 
<title>Image Display Test</title> 
<script src="../js/jquery-1.7.2.js"></script> 

<script type="text/javascript"> 
function showImage(){ 
    $('#loadingImage').toggle(); 
} 
</script> 
</head> 
<body> 
    <input type="button" value="Show Button" id="hide_show" onclick="showImage();"/> 
    <img id="loadingImage" src="1.jpeg"/> 
</body> 
</html>

出典

2016-08-06 10:46:11

を試します

ここに実例があります：http://jsfiddle.net/rVBzt/

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

出典

2016-08-06 10:48:22 Abhishek

私はボタンが押されたときの画像を作るために、次のコードを使用していボタン

答えて

関連する問題