onMouseOver Event Example

Inaccessible Example

Example Start

HTML Source Code


<p class="rollover">
  <a href="#"
     onmouseover="swap_image( event, 'images/example1a.png')"
     onmouseout="swap_image( event, 'images/example1.png')">
  
     <img src="images/example1.png" alt="Image Button" />
  
  </a>
</p>

CSS Code


#content p.rollover {
  margin: 0;
  padding: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
}

#content p.rollover a {
  padding: 0;
}

#content p.rollover a img {
  margin: 0;
  padding: 0;
  border: none;
}

Javascript Source Code


// JavaScript Document

function swap_image( event, image_url ) {
   var e = event || window.event;
  
   // test for W3C or IE event object to get event node information
   if( e.target )
     var node = e.target;
   else
     var node = e.srcElement;

   // test to see if there is a valid dom node
   if( node )
     // If the node is an IMG node then a mouse event ocuured and use the event node to change images
     if( node.tagName == "IMG" )
      node.src = image_url;
      // Else the node is a focus event and on the A element is the event node and need to get the child image node to do image swap  
   else
      node.getElementsByTagName("img")[0].src = image_url;
    
   return false;
  
}

Accessible Example

Example Start

HTML Source Code


<p class="rollover">
  <a href="#"
     onmouseover="swap_image( event, 'images/example1a.png')"
     onmouseout="swap_image( event, 'images/example1.png')"
     onfocus="swap_image( event, 'images/example1a.png')"
     onblur="swap_image( event, 'images/example1.png')">
  
     <img src="images/example1.png" alt="Image Button"/>
  
  </a>
</p>

CSS Code


#content p.rollover {
  margin: 0;
  padding: 0;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
}

#content p.rollover a {
  padding: 0;
}

#content p.rollover a img {
  margin: 0;
  padding: 0;
  border: none;
}

Javascript Source Code


// JavaScript Document

function swap_image( event, image_url ) {
   var e = event || window.event;
  
   // test for W3C or IE event object to get event node information
   if( e.target )
     var node = e.target;
   else
     var node = e.srcElement;

   // test to see if there is a valid dom node
   if( node )
     // If the node is an IMG node then a mouse event ocuured and use the event node to change images
     if( node.tagName == "IMG" )
      node.src = image_url;
      // Else the node is a focus event and on the A element is the event node and need to get the child image node to do image swap  
   else
      node.getElementsByTagName("img")[0].src = image_url;
    
   return false;
  
}