您的位置：首页 > Web前端 > JavaScript

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

2015-10-09 20:44 666 查看

1.html

<!DOCTYPE html>
<html>
<head>
<title>A Simple Rollover</title>
<link rel="stylesheet" href="script1.css">
</head>
<body>
<a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onmouseout="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文件夹

运行结果

学习心得

onmouseover=“document.images['arrow'].src='images/arrow_on.gif' "当鼠标移到图像上时（id为arrow的src），images目录中的替换图像arrow_on.gif被写到文档中
onmouseout="document.images['arrow'].src='images/arrow_off.gif'"当鼠标移走时，arrow_off.gif重新显示

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航