{welcome to JS} 处理图像（翻转器）

最新推荐文章于 2022-12-08 17:13:33 发布

lingle77

最新推荐文章于 2022-12-08 17:13:33 发布

阅读量644

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lingle77/article/details/49005523

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.html

<!DOCTYPE html>
<html>
<head>
   <title>A Simple Rollover</title>
   <link rel="stylesheet" href="script1.css">
</head>
<body>
   <a href="next.html" οnmοuseοver="document.images['arrow'].src='images/arrow_on.gif'" οnmοuseοut="document.images['arrow'].src='images/arrow_off.gif'"><img src="images/arrow_off.gif" id="arrow" alt="arrow"></a>
</body>
</html>

script1.css

body{
	background-color: #FFF;
}
img{
	border-width: 0; 
}
img#arrow,imag#arrowImg{
	width:147px;
	height: 82px;
}
#button1,#button2{
	width: 113px;
	height: 33px;
}
.centered{
	text-align: center;
}
#adBanner{
	width: 400px;
	height: 75px;
}

images文件夹

运行结果

学习心得

οnmοuseοver=“document.images['arrow'].src='images/arrow_on.gif' "

当鼠标移到图像上时（id为arrow的src）， images目录中的替换图像arrow_on.gif被写到文档中

οnmοuseοut="document.images['arrow'].src='images/arrow_off.gif'"

当鼠标移走时，arrow_off.gif重新显示

这种翻转器替换图片有延迟虽然简单并不是很好的方法

当然我也试了一下不用css文件也同样可行

优惠劵

lingle77

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
{welcome to JS} 处理图像（翻转器）

1.html A Simple Rollover script1.cssbody{ background-color: #FFF;}img{ border-width: 0; }img#arrow,imag#arrowImg{ width:147px; height: 82px;}#button1,#button2{ wid
复制链接

扫一扫