处理图像3——多个链接触发翻转器

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;
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容