我不理解的是:linkObj如果代表一个超链接对象<a>的话,那通过
document.getElementById(linkObj.className)得到的对象引用是不是还是对超链接
<a>对象的引用啊?如果不是的话,那是对超链接内图像的引用??
MultiLinksSingleRollover.html代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Links, Single Rollover</title>
<script src="MultiLinksSingleRollover.js"></script>
<link rel="stylesheet" href="MultiLinks.css">
</head>
<body>
<div id="captionDiv">
<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci">
<img src="images/bg.gif" id="captionField" alt="Text Field">
</div>
<div id="inventionDiv">
<img src="images/leoText.gif" id="heading" alt="Leonardo's Inventions">
<a href="flyPage.html" class="captionField" id="flyer"><img
src="images/flyer.gif" width="293" height="165" alt="Flying Machine"
id="flyerImg"></a>
<a href="tankPage.html" class="captionField" id="tank"><img
src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a>
<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>
MultiLinksSingleRollover.js代码:
window.onload = rolloverInit;
function rolloverInit(){
for(var i=0; i<document.links.length; i++){
var linkObj = document.links[i];
//无法使用翻转图像的 id 计算出改变过图像 id, id 是唯一的,因此使用
className
if(linkObj.className){
var imgObj = document.getElementById(linkObj.className);
if(imgObj){
setupRollover(linkObj, imgObj);
}
}
}
}
function setupRollover(thisLink, textImage){
thisLink.imgToChange = textImage;
thisLink.onmouseout = function(){
this.imgToChange.src = this.outImage.src;
}
thisLink.onmouseover = function(){
this.imgToChange.src = this.overImage.src;
}
thisLink.outImage = new Image();
thisLink.outImage.src = textImage.src;
thisLink.overImage = new Image();
thisLink.overImage.src = "images/" + thisLink.id + "Text.gif";
}
--
FROM 182.43.95.*