JavaScript 在鼠标悬停时更改其他图像

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 在鼠标悬停时更改其他图像相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>blubb</title>
</head>
<body>
	<div id="PageHeader"> </div>
	<div id="PageContent">	
		<img class="thumb" src="http://snipplr.com/bookcovers/bookjs1.jpg" alt="" />
		<img class="thumb" src="http://snipplr.com/bookcovers/book-django.jpg" alt="" />
		<img id="main_image" src="" alt="" />
	</div>
	<div id="PageFooter">
		 
	</div>

<script type="text/javascript">
// see http://snipplr.com/view/2950/getelementsbyclassname/
// Implementation of the missing (nonexistant) 'document.getElementsByClassName()
document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)) retnode.push(elem[i]);
	}
return retnode;
};

function start(){
	var thumbs = document.getElementsByClassName('thumb');
	for (var i = 0; i < thumbs.length; i++) {
		thumbs[i].onmouseover = function(){
			document.getElementById('main_image').src = this.src;
		}
	}

	
}

window.onload = start;
</script>
</body>
</html>

以上是关于JavaScript 在鼠标悬停时更改其他图像的主要内容，如果未能解决你的问题，请参考以下文章

鼠标悬停更改图像位置和大小

悬停元素时更改背景

如何在悬停时更改图像源？

Bootstrap - 在鼠标悬停时更改图标图像[重复]

悬停时更改图像

如何在光滑的滑块中创建自定义箭头以在悬停时更改图像？