不引人注目的鼠标图像交换与预加载

Posted 2021-02-27

Needs object detection to be completely unobtrusive

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.
        */