Developer

Stupid Web Tricks: Rollover highlights

Use this rollover JavaScript to highlight your image's more appealing features.

Click here for our complete list of Stupid Web Tricks.

By Holly Cunningham

Sure they see you. Your picture is splashed out so big and so often throughout your site, it'd be hard to miss. But are they noticing the finer points of your phrenology, the noble family-and-fistfights nose, the cleft in your chin from years of nocturnal familiarity with medical tape and a dime, the prominent scar from a reluctant seagull rescue? How can you be sure, short of making them take a quiz before you let them leave? There is succor for those worried about the less-observant masses, and we have it right here in this handy rollover JavaScript that highlights your image's more appealing features from the comfort of wildly overblown descriptive text.

Maybe not writ large, but in neon

If a picture is worth a thousand words, then a picture with mouseover-activated highlighting is like a thousand words plus CliffsNotes. Every minute detail can have its own starring role without the visual distraction of pop-ups or obvious graphic-swapping chicanery. For those who want to delve further into the story behind the highlighted scar, tattoo, or what-have-you, each rollover is tied to a link, so that you can fill subsequent pages with your fascinating history.

First you need a head shot or other chosen graphic to serve as the default or onmouseout image. Make a copy of the image and use a graphics editor to add highlights to the area that you want to stand out. Repeat this process for each area you want highlighted by a rollover. Then just insert your filenames, text, and link information in the place indicated in this rollover code and put it in the <head> of your Web page.

Rollover highlight script

Click here.

Now design your page, placing your original image in its spot of glory. Copy this HTML into the <body> of your page, changing the links and hyperbolic text to match the highlights on your image.

Rollover highlight HTML

Click here.

You can also add to the number of highlights by copying the prod1on block in the rollover JavaScript and adding it to the end, changing it to prod7on, and so on.

Now we can all bathe in a U-235 glow
And not just of self-importance. Our thanks to Darren Muller, who found this trick at the gamer's mecca known as QuickShot and dared to ask for highlights without peroxide.

Holly Cunningham, a frequent contributor to CNET Builder.com, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks

Free Newsletters, In your Inbox