javascript---处理图片翻转器

最新推荐文章于 2022-10-20 10:35:20 发布

java_wliang

最新推荐文章于 2022-10-20 10:35:20 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： JS

本文链接：https://blog.youkuaiyun.com/java_wliang/article/details/16856199

版权

JavaScript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的交互式网页案例。当鼠标移过不同的图像时，会在页面固定位置显示与该图像相关的信息。此案例通过绑定mouseover和mouseout事件实现了图像的动态替换，展示了达芬奇的几项著名发明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标移动到不同图像上，在同一处显示相关的信息

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Link , single rollover</title>
<style type="text/css">
body {
	background-color: #ec9;
}
img {
	border-width: 0;
}
#captionDiv {
	float: right; /*定义元素在哪个方向浮动  */
	width: 210px;
	margin: auto 50px; /* 外边距 */
}
#captionField {
	margin: 20px auto;
	width: 208px;
	height: 27px;
}
#inventionDiv {
	width: 375px;
	margin-left: 20px;
}
#heading {
	margin-bottom: 20px;
	width: 375px;
	height: 26px;
}
</style>
<script type="text/javascript">
	/*	注意rolloverInit是绑定，所以不需要加()  */
	window.onload = rolloverInit;
	
	function rolloverInit() {
		for(i=0;i<document.links.length;i++) {
			var linkObj = document.links[i];
			if(linkObj.className) {
				var imgObj = document.getElementById(linkObj.className);
				if(imgObj) {
					setupRollover(linkObj , imgObj);
				}
			}
		}	
	}
	
	function setupRollover(thisLink ,  textImage) {
		thisLink.changeImage = textImage;
		
		thisLink.outImage = new Image();
		thisLink.outImage.src = textImage.src;
		thisLink.overImage = new Image();
		thisLink.overImage.src = "images/" + thisLink.id + "Text.gif";
		
		thisLink.onmouseout = function() {
			thisLink.changeImage.src = thisLink.outImage.src;
		}
		thisLink.onmouseover = function() {
			thisLink.changeImage.src = thisLink.overImage.src;
		}
	}
</script>
</head>
<body>
	<div id="captionDiv">
		<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci"/><BR/>
		<img src="images/bg.gif" id="captionField" alt="Text Field"/>
	</div>
	<div id="inventionDiv">
		<img src="images/leoText.gif" id="heading" alt="Leonardo's Inbentions"/><BR/>
		<a href="flyPage.html" class="captionField" id="flyer">
			<img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"/>
		</a><BR/>		
		<a href="tankPage.html" class="captionField" id="tank">
			<img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"/>
		</a><BR/>		
		<a href="heliPage.html" class="captionField" id="helicopter">
			<img src="images/helicopter.gif"  width="224" height="160" alt="Helicopter" id="helicopterImg"/>
		</a>
	</div>
</body>
</html>