CODEWITHSUNDEEP
javascripthtmlimagebutton
ASA2k
ASA2k

Reputation: 11

How to make an Image display/hide using a button

I'm using the following code to make an image when a button is pressed:

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

So far it works, but then the image remains on the screen, Is there anyway to make it that if clicked again the image disappears?

Upvotes: 0

Views: 458

Answers (3)

Abhishek
Abhishek

Reputation: 316

Here is a working example: 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();
});

Upvotes: 0

Rax Shah
Rax Shah

Reputation: 531

Try this code

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

Upvotes: 0

madox2
madox2

Reputation: 51841

You can check if image is visible and then hide/show it accordingly:

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

or using shortcut (ternay operator):

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

Upvotes: 1

Related Questions