一、创建翻转器

1.A Simple Rollover：

html :

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>A Simple Rollover</title>
        <meta name="viewport" content="width=device-scale,initial-scale=1">
        <!--[if it IE9]>
            <script src="files/html5shiv.js"></script>
        <![endif]-->
        <link type="text/css" rel="stylesheet" href="../css/simple Rollover.css"/>
        <script  type="text/javascript"  src="../js/simple Rollover.js"></script>
    </head>
    <body>
        <a href="http://hicc.me/" onmouseover="document.arrow.src='../img/redarrow.jpg'"
        onmouseout="document.arrow.src='../img/bluearrow.jpg'" > 
            <img src="../img/bluearrow.jpg" name="arrow" alt="arrow">
        </a>
    </body>
</html>

css:

body {
    background-color: #ffffff;
    }
    
 img {
     width: 3000;
     height: 150px;
     border: 0;   
    }

output:

onmouseover

onmouseout

2.A More Effective Rollover

html:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>A Simple Rollover</title>
        <meta name="viewport" content="width=device-scale,initial-scale=1">
        <!--[if it IE9]>
            <script src="files/html5shiv.js"></script>
        <![endif]-->
        <link type="text/css" rel="stylesheet" href="../css/simple Rollover.css"/>
        <script  type="text/javascript"  src="../js/A More Effective  Rollover.js"></script>
    </head>
    <body>
    <!--
        <a href="http://hicc.me/" onmouseover="document.arrow.src='../img/redarrow.jpg'"
        onmouseout="document.arrow.src='../img/bluearrow.jpg'" > 
            <img src="../img/bluearrow.jpg" name="arrow" alt="arrow">
        </a>
    -->
        <a href="http:hicc.me"><img src="../img/bd_logo1.png" id="red"></a>   
        <a href="https://www.baidu.com/"><img src="../img/vip-introduce.jpg" id="blue"></a>
        
    </body>
</html>

css:

/*
body {
    background-color: #ffffff;
    }
    
 img {
     width: 300px;
     height: 150px;
     border: 0;   
    }
    */
    
    
    img {
        width: 300px;
        height: 150px;
        border: 0;
    }

js:

window.onload=rolloverInit;
function rolloverInit( ) {
    for (var i=0;i<document.images.length;i++){
        if (document.images[i].parentNode.tagName=="A") {
            setupRollover(document.images[i]);
        }
        
    }
}

function setupRollover(thisImage) {
     thisImage.outImage=new Image();
     thisImage.outImage.src=thisImage.src;
     
     thisImage.onmouseout=function () {
        this.src=this.outImage.src; 
    } 
    
    // thisImage.overImage=new Image();
    // console.log(thisImage.id)
    
    // thisImage.overImage.src="../img/"+thisImage.id+"arrow.jpg";
    thisImage.onmouseover=function () {
        thisImage.src= "../img/"+thisImage.id+"arrow.jpg";
    }
    
    
}

output: