Return to Snippet

Revision: 3770
at September 13, 2007 09:56 by skatan


Initial Code
function imageSwap(id) {
		var links = document.getElementById(id).getElementsByTagName("a");
		var imgLoad = []
	
		for(var i = 0; i < links.length; i++) {
			attachBehavior(links[i], i);
		}

		function attachBehavior(obj, iter) {
			
			var img = obj.getElementsByTagName('img')[0];
			var imgSrc = img.getAttribute("src");
			var ext = imgSrc.match(/\.\S{3}$/);
			var overSrc = imgSrc.replace(ext, "-over" + ext);
			
                        // preLoad over states
			imgLoad[iter] = new Image();
			imgLoad[iter].src = overSrc
			
                        // use event listeners if appropriate
			obj.onmouseover = function(){
				img.setAttribute("src", overSrc);
			}
			obj.onmouseout = function(){
				img.setAttribute("src", imgSrc);
			}
		}
	}
	
	imageSwap("footer-links"); //all links inside the element with this id will receive mouseover behavior

        /* 
        takes two image links "about.gif" and "about-over.gif" and swaps them on mouseover and mouseout
        Any image link in HTML page that you want to recieve mouseover behavior make sure image exists that      
        has the name of the original image with "-over" appended to the end of the filename.
        */

Initial URL


Initial Description
Needs object detection to be completely unobtrusive

Initial Title
unobtrusive mouseover image swap with preloader

Initial Tags
javascript

Initial Language
JavaScript