Accessible JavaScript Rollover with Three-State Functionality

Kirk — Wed, 22 Apr 2009 18:55:08 +0000

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, a hover over image, and an image when the link is clicked. Use abstracted functions. Improve accessibility by creating onfocus and onblur event handlers for users without mice.

The HTML solution:



	An Accessible Three-State Rollover

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 images on page
	for (var i = 0; i < document.images.length; i++) {
		// if current image is wrapped in an anchor tag (i.e. )
		if (document.images[i].parentNode.tagName == "A") {
			// initiate rollover setup for this current image, pass the current image to that function
			setupRollover(document.images[i]);
		}
	}
}

// 'thisImage' passed from rolloverInit, meaning we need to setup the rollover for this particular image
function setupRollover(thisImage) {
	// create new child image object for thisImage object's outImage property
	thisImage.outImage = new Image();
	// store current image src as the source for outimage, so it stays same when not rolled over
	thisImage.outImage.src = thisImage.src;
	// capture rollOut function as behavior when thisImage's onmouseout event handler is triggered
	thisImage.onmouseout = rollOut;

	// create new child image object for thisImage object's overImage property
	thisImage.overImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
	// capture rollOver function as behavior when thisImage's onmouseover event handler is triggered
	thisImage.onmouseover = rollOver;

	// create new child image object for thisImage object's clickImage property
	thisImage.clickImage = new Image();
	// store preconsructed '_on'-state image src (using thisImage's captured id/name) as the source for overimage, so it stays changes when rolled over
	thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
	// capture rollClick function as behavior when thisImage's onmousedown event handler is triggered
	thisImage.onmousedown = rollClick;

	// improve accessibility
	// set image's parent anchor child Image to thisImage
	thisImage.parentNode.childImage = thisImage;
	// when image's achor tag is unselected (an event handler)
	thisImage.parentNode.onblur = rollOutChild;
	// when image's achor tag is selected (an event handler)
	thisImage.parentNode.onfocus = rollOverChild;
}

function rollOut() {
	// change thisImage's src to the outImage source property (already captured)
	this.src = this.outImage.src;
}

function rollOver() {
	// change thisImage's src to the overImage source property (already captured)
	this.src = this.overImage.src;
}

function rollClick() {
	// change thisImage's src to the clickImage source property (already captured)
	this.src = this.clickImage.src;
}

function rollOutChild() {
	// change the achor tag's childImage src to the childImage's outImage source property (already captured)
	this.childImage.src = this.childImage.outImage.src;
}

function rollOverChild() {
	// change the achor tag's childImage src to the childImage's overImage source property (already captured)
	this.childImage.src = this.childImage.overImage.src;
}

And finally here is a screenshot of the improved end rollover result:

Rollover state A:

Improved rollover state A

Rollover state B:

Improved rollover state B

Rollover state C (clicked button):

Button state when button is clicked

Demonstrating accessible rollover when button is selected but not moused over.

Three-State JavaScript Rollover photo credit: chimothy27 This programming challenge is from a...
Disjointed JavaScript Rollover Causes Separate Animation photo credit: Matt McGee This programming challenge is from...
Simple and Improved Image Rollovers photo credit: Etwood This programming challenge is from a...
Random Image Display with JavaScript photo credit: davidChief This programming challenge is from a...

KirkHings.com » accessibility

Accessible JavaScript Rollover with Three-State Functionality