How to Swapping Images using Javascript

Posted by on December 28, 2009 Leave a comment (0) Go to comments

Introduction:
In this article we are going to discuss about,how to swapping images using javascript.

Main:
For swapping images just we need to set imageurl’s on mouseover and mouseout.Please check this below sample Code.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <title>NetProgrammingHelp.Com</title>
<script  type="text/javascript">
 
 
var Click=false;
 
function ImageSwapping(src){
 var e=window.event||arguments.callee.caller.arguments[0];
 var obj=window.event?e.srcElement:e.target;
 if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
 if (!Click||obj!=Click){
  if (!obj.out){
   obj.out=obj.src;
  }
  src=src?obj.src.substring(0,obj.src.lastIndexOf('/')+1)+src:obj.out;
  obj.src=src;
  if (e.type=='click'){
   if (Click){
    Click.src=Click.out;
   }
   Click=obj;
  }
 }
}
 
function ImageStay(){
 
}
 
</script></head>
 
<body>
<center>
<br><br><br>
<a href=javascript:ImageStay('A')><img src='One.gif' onmouseover="ImageSwapping('Two.gif')" onmouseout="ImageSwapping();" onclick="ImageSwapping('Three.gif');" width="100" height="50" alt='This is the hover text'></a>
<a href=javascript:ImageStay('A')><img src='Four.gif' onmouseover="ImageSwapping('Five.gif')" onmouseout="ImageSwapping('Four.gif');" onclick="ImageSwapping('Six.gif');" width="100" height="50" alt='This is the hover text'></a>
</center>
</body>
 
</html>