一、创建翻转器
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:
Paste_Image.png
Paste_Image.png
