Printer-friendly page
Screen-friendly pageonClick Event Example
onMouseOver: Only suppors mouse events (Inaccessible)
- The
onmouseoverandonmouseoutevent handlers only response to the mouse events and keyboard users may not know that the "button link" has focus or is a link.
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>
<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;
}
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)
onfocusandonblurevents are added to allow the keyboard to also effect the styling changes.- Scripting needs to account for the difference between the source of events coming from the
imgelement (mouse events) and theaelement (keyboard events).
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>
<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;
}
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)
- CSS instead of images is used to create the visual styling of the link.
- CSS Psuedo elements
:hover,:focusand:activeare used to create styling effects in CSS, instead of swaping images in a javascript event handler.
HTML Example
HTML Source Code
<p class="rollovercss"><a href="#" >Psudo-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;
}