How to get a button in html to show/hide an image?

3.8k Views Asked by htmandvbscript At 19 November 2016 at 20:30

I want to have 2 buttons or just 2 tags or liks to show/hide 2 imges but independently of each other .I have coded for 1 image but it dont work now if i set it twice in an html. See 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>

Original Q&A

There are 3 best solutions below

JV Lobo On 19 November 2016 at 20:36

Is this what you need? Because I don't fully understand your question.

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>

Nicholas On 19 November 2016 at 20:57

JavaScript

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

JQuery

I've seen the tag of JQuery for the post, I would recommend Javascript since it's faster and doesnot require to load JQuery, but still.

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

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

Tanvir Hossain On 19 November 2016 at 21:04

you can simply use

style.display == 'block'

to block any image or use

style.display == 'none'

i am showing you a full example so you can understand..

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

How to get a button in html to show/hide an image?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in BUTTON

Related Questions in HTML-COMPONENTS

Trending Questions

Popular # Hahtags

Popular Questions