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!

internet.com Privacy Policy

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

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks
Symantec eBook: The Guide to E-Mail Archiving and Management Microsoft Article: RODCs Transform Branch Office Security Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program Avaya Article: Advancing the State of the Art in Customer Service Microsoft Article: Security Enhancements Abound in Windows Server 2008		Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
HP Webcast: Disaster Recovery Planning Go Parallel Video: Performance and Threading Tools for Game Developers HP Video: StorageWorks EVA4400 and Oracle		HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
IBM TCO eKIT: Your IT Budget is Under Attack, Get in Control IBM Energy Efficiency eKIT: Learn How to Reduce Costs 30-Day Trial: SPAMfighter Exchange Module		Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
Microsoft Article: Silverlight Streaming--Free Video Hosting for All Featured Algorithm: Intel Threading Building Blocks - parallel_reduce		HP Demo: StorageWorks EVA4400 MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES