« »

Create image rollovers for your JavaScript 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.

Label: Unobtrusive JavaScript Image Rollovers

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">

img {border: none;}
ul {list-style-type:none;}
ul li {display:inline;}

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
/* 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);
}

function test(){alert('This is test only');}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->