Home Tutorial Jquery Hide/show Image by click

 
 

Share on Google+Share on Google+
Hide/show Image by click
Posted on: July 27, 2010 at 12:00 AM
Advertisement
In this tutorial ,we will discuss about how to display image by click using jQuery.

Hide/show Image by click

In this tutorial ,we will discuss about how to display image by click using jQuery. In the below example, a image and two lines are given. By clicking on upper line , it will hide the image and the line as well. But when we click on remaining line , it will display the image again.

jqHideImageOnClick.html

<html>
<head>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body>
<img id="logo" src="logo.gif" alt="" width="200" height="50" />
<div id="myclick">
<font color="blue">
Click here to hide the logo
</font>
</div>
<div id="myclick1">
<font color="blue">
Click here to show the logo
</font>
</div>
<script>
$(document).ready(function() {
$('#myclick').click(function() {
$('#logo').hide('slow', function(){
$('#myclick').hide('slow', function(){
});
});
});
$('#myclick1').click(function() {
$('#logo').show('slow', function() {

});
});
});
</script>
</body>
</html>

OUTPUT

After click on upper line :

After click on above line :

Download Source Code

Click here to see demo

Advertisement

Related Tags for Hide/show Image by click :


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 27, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com