Disjointed JavaScript Rollover Causes Separate Animation
This programming challenge is from a Lynda.com instructional video, featuring Dori Smith, which I studied/practiced last summer but once again spring 2009. I do not mean to just re-post the wonderful Lynda.com code, but rather add instructional value to it by way of clearer variable names and explanatory comments. The end result itself is not terribly sexy, but I liked the algorithm construction process.
I post these self-instructional challenges for a few reasons. One is to demonstrate my programming learning, experience, and progression. Another reason is to make sure my code and solutions are indexed by search engines, so that other beginning programmers may get help if they need it. Finally, self-instructional challenges are interesting and different than academic challenges because I sought, discovered, and performed them on my own volition without anyone else telling me to do so. I did it because I wanted to learn and practice.
Challenge: Create a JavaScript image rollover animation which includes a default image, and a hover over image. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice. Make the rollover occur when you mouse over a different document element.
The HTML solution:
<html> <head> <title>A Disjointed Link Rollover</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" rev="stylesheet" href="styles.css" /> </head> <body> <h1> <a href="next.html" id="arrow">Next page</a> </h1> <img src="images/arrow_off.gif" width="147" height="82" id="arrow_image" alt="arrow" /> </body> </html>
The CSS solution:
body {
background-color: white;
}
img {
border-width: 0;
}
The JavaScript solution:
// initialize the rollovers when window loads
window.onload = rolloverInit;
function rolloverInit() {
// loop through all links on page
for (var i=0; i<document.links.length; i++) {
// capture i-th link as local variable to make life easier later on
var linkObject = document.links[i];
// if current linkObject has an id (meaning it is something we care to change)
if (linkObject.id) {
// append current image's id with _image (preplanned format), save to local variable
var imageObject = document.getElementById(linkObject.id + "_image");
// if the imageObject exists
if (imageObject) {
// pass both current local variables to setupRollover function
setupRollover(linkObject, imageObject);
}
}
}
}
// 'thisLink & thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular link & image
function setupRollover(thisLink, thisImage) {
// capture the current link's associated image as thisLink's intended target image property
thisLink.imgToChange = thisImage;
// capture rollOut function as behavior when thisLinks's onmouseout event handler is triggered
thisLink.onmouseout = rollOut;
// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
thisLink.onmouseover = rollOver;
// create new child image object for thisLink's outImage property
thisLink.outImage = new Image();
// store current image src as the source for overImage, so it stays same when not rolled over
thisLink.outImage.src = thisImage.src;
// create new child image object for thisLink's overImage property
thisLink.overImage = new Image();
// store current image src as the source for overImage, so it stays same when not rolled over
thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
// improve accessibility
// simply set thisLink's onblur and onfocus event handlers to rollOut and rollOver respectively
thisLink.onblur = rollOut;
thisLink.onfocus = rollOver;
}
function rollOut() {
// change thisLinks's image src to the outImage source property (already captured)
this.imgToChange.src = this.outImage.src;
}
function rollOver() {
// change thisLinks's image src to the overImage source property (already captured)
this.imgToChange.src = this.overImage.src;
}
And finally here is a screenshot of the link highlighted result:
