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文件也同样可行