onClick Event Example

onMouseOver: Only suppors mouse events (Inaccessible)

HTML Example

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 Source 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;
  
}

onMouseOver: Supports keyboard focus events (Accessible)

HTML Example

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 Source 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;
  
}

onMouseOver: CSS Psuedo Elements for Mouse and Keyboard Styling Effects (Accessible)

HTML Example

HTML Source Code

<p class="rollovercss"><a href="#" >Psuedo-image Link</a></p>

CSS Source Code


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

#content p.rollovercss a {
  background-color: green;
  padding: .5em;
  border: double thick white;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 150%;
}

#content p.rollovercss a:hover,
#content p.rollovercss a:focus,
#content p.rollovercss a:active {
  background-color: blue;
}