Advanced Search

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