Image Maps with Rollover Effects
Image maps were interesting for about three and a half minutes in 1992. Then JavaScript came out and offered developers and users interactive feedback for linked images. Image maps and their associated <area> tags could not (and still do not) provide mouseover functionality. In the age of Flash, hot-linked images using HTML seems a quaint throwback. Sorta like the adjective “hot-linked.”
Still, the ease with which developers can create image maps using programs such as Dreamweaver and the wide availability of standalone programs and web sites to generate image maps makes image maps a tempting (but ultimately dissatisfying) navigation element. If only there were an easy way to add rollover feedback to an image map.
One solution is to use CSS. There are a number of web pages that explain how to do this, the best of which I could find being a post on “CSS Image Maps” by Frank Manno. Manno’s “CSS Image Maps, Redux” also is a model of clarity, especially compared to resources such as Stu Nicholls’s tutorial for “Creating an Image Map using CSS only.”
Useful as these resources may be, they miss the simple how-do-I-do-it heart of code conversion. It’s one thing to know how to code something oneself and quite another to convert the output of tools that many web developers already have access to.1
I’ve written a PERL script that will convert a Dreamweaver-generated (CS4-tested) image map into a CSS image map with rollover effects. With a little regex savoire-faire, the script can be modified to work with image maps generated by other programs. Download the .zip file and start adding early-90s rollover feedback to your image maps! 