Swap-an-image

Dynamic Javascript

To manage image mouseover effects flexibly yet with a minimum of code in the HTML, with the option to automatically handle the complementary onmouseout events, is the idea behind this little gem of a Javascript function.

A live example

The HTML

<img src="/image/clipart/wood/tree01.gif" width="135" height="112" id="im1" alt=""
 onmouseover="swap('/image/clipart/wood/tree26.gif','im1')">

<img src="/image/clipart/wood/tree15.gif" width="135" height="112" id="im2" alt=""
 onmouseover="swap('/image/clipart/wood/tree15.gif','im1',1)">

<img src="/image/clipart/wood/tree26.gif" width="135" height="112" id="im3" alt=""
 onmouseover="swap('/image/clipart/wood/tree17.gif','im2');swap('/image/clipart/wood/tree17.gif','im3');">

The Javascript

function swap(s,n){        
  var el;         
  if( n && document.images && document.images[n] )            
   el = document.images[n];
  else if( event.srcElement && event.srcElement.src )
   el = event.srcElement;
  if( el )
   el.src = s;
}