The JavaScript Source: Navigation : Unobtrusive JavaScript Image Rollovers

Home

Unobtrusive JavaScript Image Rollovers

Create image rollovers for your navigation without hardcoding any JavaScript into the HTML code on your Web pages. Easy to implement, even for beginners, and works across all browsers. Degrades nicely for visitors with JavaScript turned off.

The JavaScript Source: Navigation : Unobtrusive JavaScript Image Rollovers
Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

 img {border: none;} ul {list-style-type:none;} ul li {display:inline;}  /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com By: Christian Watson :: http://www.smileycat.com Based on a script by Chris Nott: http://www.dithered.com/javascript/rollovers/index.html License: http://creativecommons.org/licenses/by/1.0/ Futher info: http://www.smileycat.com/miaow/archives/000224.html */ function isDefined(property) { return (typeof property != 'undefined'); } var rolloverInitialized = false; function rolloverInit() { if (!rolloverInitialized && isDefined(document.images)) { var bodyId = document.body.id; // ID of the BODY tag // get all images (including all <input type="image">s) // use getElementsByTagName() if supported var images = new Array(); if (isDefined(document.getElementsByTagName)) { images = document.getElementsByTagName('img'); var inputs = document.getElementsByTagName('input'); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == 'image') { images[images.length] = inputs[i]; } } } // otherwise, use document.images and document.forms collections // remove if not supporting IE4, Opera 4-5 else { images = document.images; inputs = new Array(); for (var formIndex = 0; formIndex < document.forms.length; formIndex++) { for (var elementIndex = 0; elementIndex < document.forms.elements.length; elementIndex++) { if (isDefined(document.forms.elements[i].src)) { inputs[inputs.length] = document.forms.elements[i]; } } } } // get all images with '_off.' in src value excepting the one that is for the BODY for (var i = 0; i < images.length; i++) { if (images[i].src.indexOf('_off.') != -1) { // check for BODY image, and turn it 'on' if found if (images[i].src.indexOf(bodyId) != -1) images[i].src = images[i].src.replace(/_off\./, '_on.'); else { var image = images[i]; // store the off state filename in a property of the image object image.offImage = new Image(); image.offImage.src = image.src; // store the on state filename in a property of the image object // (also preloads the on state image) image.onImage = new Image(); image.onImage.imageElement = image; // add onmouseover and onmouseout event handlers once the on state image has loaded // Safari's onload is screwed up for off-screen images; temporary fix if (navigator.userAgent.toLowerCase().indexOf('safari') != - 1) { image.onmouseover = function() { this.src = this.onImage.src; }; image.onmouseout = function() { this.src = this.offImage.src; }; } else { image.onImage.onload = function() { this.imageElement.onmouseover = function() { this.src = this.onImage.src; }; this.imageElement.onmouseout = function() { this.src = this.offImage.src; }; }; } // set src of on state image after defining onload event handler // so cached images (that load instantly in IE) will trigger onload image.onImage.src = image.src.replace(/_off\./, '_on.'); } } } } rolloverInitialized = true; } // call rolloverInit when document finishes loading if (isDefined(window.addEventListener)) { window.addEventListener('load', rolloverInit, false); } else if (isDefined(window.attachEvent)) { window.attachEvent('onload', rolloverInit); }  <script type="text/javascript" src="rollover.js.js"></script>  <body id="home">  <div id="navbar" align="center"> <ul> <li><a href="javascript:onclick=test();"><img src="home_off.gif" alt="Home" /></a></li> <li><a href="javascript:onclick=test();"><img src="about_off.gif" alt="About" /></a></li> <li><a href="javascript:onclick=test();"><img src="donate_off.gif" alt="Donate" /></a></li> </ul> </div> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p>
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Comments feed

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Solutions

Whitepapers and eBooks

Whitepaper: Introducing the Azure Services Platform
Whitepaper: Introduction to Microsoft .NET Services for Developers
Whitepaper: Securing Microsoft's Cloud Infrastructure
Internet.com eBook: Becoming a Better Project Manager
Microsoft Partner Portal: What Azure Means for Microsoft Partners

Internet.com eBook: Web Development Frameworks for Java
Internet.com eBook: Developing a Content Management System Strategy
Article: Ten Things IT Professionals Should Know About Windows 7
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Get Started with .NET Services

MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Amyuni: PDF & PDF/A Engine for .NET and ActiveX Apps
Red Gate Free Trial: SQL Toolbelt
Iron Speed Designer Application Generator

Download Award-Winning Red Gate SQL Backup Pro
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
Internet.com Hot List: Java EE 6 Platform Highlights the JavaOne Conference

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES