Monday, May 9, 2011

Flipping of image with another using JavaScript

Below is very simple snippet code for flipping of two images using JavaScript. If possible you guys can make it generic snippet code. This code will help in mainly for showing / hiding of div’s, for example if he clicks on ‘Show Image’ it will automatically changes to ‘Hide Image’. Its a simple snippet code.


Below is the div, in div – Initially I am showing the hide image, when user clicks on this image, the image as well as the title of the img will be swapped with show image and the title will be ‘Maximize’… and Vice-Versa.

The below function should be placed in <script></script>.
//This Function is for Flipping of 'Show Image' to 'Hide Image' and Vice-Versa
function flip(imageID) {
var img = document.getElementById(imageID);
if (img.src.indexOf('images/hide.gif') > -1) {
img.src = 'images/show.gif';
img.title='Maximize';
} else {
img.src = 'images/hide.gif'
img.title='Minimize';
}
}
 below div should be placed in <body>.
<div><a href="#" onClick="flip('hide'); return false;" title="Minimize" style="padding:0px"><img src="images/hide.gif" id="hide" border="0"></a></div>

No comments:

Post a Comment