JavaScript 使用预加载器进行不显眼的鼠标悬停图像交换

Posted 2021-05-20

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