5.让多个链接触发一个翻转器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<link type="text/css" rel="stylesheet" href="../css/Multiple links，Multiple Rollovers.css">
<script type="text/javascript" src="../js/Multiple links，Multiple Rollovers.js"></script>
<title>Multiple links，Multiple Rollovers</title>
</head>
<body>
<img src="../img/DaVinci.jpg" alt="DaVinci" align="right" >
<h1> Leonardo's Inventions</h1>
<a href="index2.html" class="textField" id="fly" >
<img src="../img/fly.jpg" alt="flyMachine" id="flyerImg">
</a>
<br clear="right">
<img src="" class="textField" id="textField" alt="textField" align="right">
<a href="index3.html" class="textField" id="water">
<img src="../img/water.jpg" alt="waterbox" id="waterImg" >
</a>
<br>
<a href="index3.html" class="textField" id="helicoper">
<img src="../img/helicoper.jpg" alt="helicoper" id="helicoperImg">
</a>
</body>
</html>
window.onload=rolloverInit;
function rolloverInit() {
for(var i=0;i<document.links.length;i++ ){
var linkUrl=document.links[i];
if (linkUrl.className){
var imgUrl=document.getElementById(linkUrl.className);
if (imgUrl){
setupRollover(linkUrl,imgUrl);
}
}
}
}
function setupRollover(thisLink,thisImg) {
var defaultUrl=thisImg.src;
thisLink.onmouseover=function() {
thisImg.src="../img/"+thisLink.id+".jpg";
}
thisLink.onmouseout=function () {
thisImg.src=defaultUrl;
}
}
网友评论