How would I make my code show one image at time?
Question
How would I make my code show one image at time?
<!DOCTYPE html>
<html lang ="en">
<head>
<title> VIS</title>
<meta charset="utf-8"/>
<script type="text/javascript" >
function showImage(id){
if(document.getElementById(id).style.visibility =='visible')
document.getElementById(id).style.visibility = 'hidden';
else
document.getElementById(id).style.visibility= 'visible';
}
</script>
</head>
<body>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Pum"/>
<button onclick="showImage('Pum');">Pumpkins</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Straw"/>
<button onclick="showImage('Straw');">Strawberries</button>
</div>
<div style="position: relative; visibility: visible;">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
alt="Pumpkins" id="Ras"/>
<button onclick="showImage('Ras');">Rasberries</button>
</div>
</body>
</html>
My code works fine, but I want it to show one image at time.When I click one of them, it will hide the other .
With my code,can show as many images as I want and as few images. How could I do this , could I send multiple ids as parameters ?
Any help would be great.
1 answers
solution1
0 ACCPTED 2015-10-18 17:11:21
Try like this:
First get all the images and hide them , if you want any specific to be shown at load time just ignore that index.after loading you can do your button action as you are trying to.If you want to hide the rest of the visible images on button click then just get the visible image and hide it and show the clicked one.
<!DOCTYPE html> <html lang ="en"> <head> <title> VIS</title> <meta charset="utf-8"/> </head> <body> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Pum"/> <button onclick="showImage('Pum');">Pumpkins</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Straw"/> <button onclick="showImage('Straw');">Strawberries</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Ras"/> <button onclick="showImage('Ras');">Rasberries</button> </div> </body> <script type="text/javascript" > removeVisibility(); function showImage(id){ removeVisibility(); if(document.getElementById(id).style.visibility =='hidden') document.getElementById(id).style.visibility = 'visible'; } function removeVisibility(){ var imgs=document.getElementsByTagName('img');//get all the images for(var i=0;i< imgs.length;i++){ imgs[i].style.visibility= 'hidden'; //hide them } } </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.