JavaScript and User Feedback

JavaScript rollovers are very common on the web, but useful ones are actually quite rare. By useful I mean rollovers that might actually give the user some useful information, other than just telling them that they have a clickable item under the mouse.

Here's an example. You can roll the mouse around the map, and as you hit certain areas, two things will happen: a larger version of the area will appear, like a zoom image, and the name of the area will light up, indicating where you are. And, to keep things easy for the user, if you roll over one of the five names, its location on the map will light up, and the zoom image will appear. So users can use the map in two ways: they can wander around visually, or they can use the list of names to find a particular place.

The JavaScript for this is actually quite simple; the tricky part was making sure all the images were properly named, and that a workable system was in place, so that a single name, say "germantown", would do three things: make the zoom image appear, light up a location on the map, and make the name highlight.

function doRollover(imageName,imageState) {
	document.images[imageName].src = "map/images/" + imageName + imageState + ".jpg";
	document.images[imageName + "-title"].src = "map/images/" + imageName + "-title" + imageState + ".gif";
	
	if (imageState == "-0") {
		document.images.bigMap.src = "map/images/spacer.gif";
	} else {
		document.images.bigMap.src = "map/images/" + imageName + ".jpg";
	}
}