Unobtrusive Javascript Image Rollovers really cool useful..

shiv · March 21, 2006

i find this really cool..gr8 piece of code.

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.

<!-- Paste this code into the CSS section of your HTML document  -->img {border: none;}ul {list-style-type:none;}ul li {display:inline;}<!-- Paste this code into an external JavaScript file named: rollover.js  -->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 loadingif (isDefined(window.addEventListener)) {   window.addEventListener('load', rolloverInit, false);}else if (isDefined(window.attachEvent)) {   window.attachEvent('onload', rolloverInit);}<!-- Paste this code into the HEAD section of your HTML document.	 You may need to change the path of the file.  --><script type="text/javascript" src="rollover.js.js"></script><!-- Paste this code into the BODY tag --><body id="home"><!-- Paste this code into the BODY section of your HTML document  --><div id="navb script:onclick=test();"><img src="home_off.gif" alt="Home" /></a></li>  <li><a href="java script:onclick=test();"><img src="about_off.gif" alt="About" /></a></li>  <li><a href="java script: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>

cheerz!

shiv

Sign In

Unobtrusive Javascript Image Rollovers really cool useful..

Recommended Posts

shiv 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information