Stupid Web Tricks: Rollover highlights
Takeaway: 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 scriptNow 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 HTMLYou 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.
SponsoredWhite Papers, Webcasts, and Downloads
- Live Webcast: Simplified IT with Software-as-a-Service (SaaS) ZDNet
- Improving Storage Expansion for Servers and Applications Dell EqualLogic
- Live Webcast: Optimized Virtualization ZDNet
- Offshore Software Test Automation: A Strategic Approach to Cost and Speed Effectiveness LogiGear
- 10 Keys to Successful Scrum Adoption Construx Software Builders
Article Categories
- Security
- Security Solutions, IT Locksmith
- Networking and Communications
- E-mail Administration NetNote, Cisco Routers and Switches
- CIO and IT Management
- Project Management, CIO Issues, Strategies that Scale
- Desktops, Laptops & OS
- Windows 2000 Professional, Microsoft Word, Microsoft Excel, Microsoft Access, Windows XP,
- Data Management
- Oracle, SQL Server
- Servers
- Windows NT, Linux NetNote, Windows Server 2003
- Career Development
- Geek Trivia
- Software/Web Development
- Web Development Zone, Visual Basic, .NET
