图片预下载
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片翻转</title>
<script>
window.onload = rolloverInit;
/*
1遍历所有img
2判断父节点是否为A标签
*/
function rolloverInit(){
for(var i=0; i<document.images.length; i++){
if(document.images[i].parentNode.tagName == "A"){
// tagName 返回值为大写
setupRollover(document.images[i]);
}
}
}
/*
创建两个新的图像对象，theImage.outImage和theImage.overImage
分别保存移入和移出的图片
*/
function setupRollover(theImage){
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.onmouseout = function(){
this.src = this.outImage.src;
}
theImage.overImage = new Image();
theImage.overImage.src = 'img/' + theImage.id + '_on.jpg';
theImage.onmouseover = function(){
this.src = this.overImage.src;
}
}
</script>
</head>
<body>
<a href="next1.html">
<img src="img/1.jpg" alt="arrow" id="1" title="title">
</a>
<a href="next2.html">
<img src="img/2.jpg" alt="arrow" id="2" title="title">
</a>
</body>
</html>
扫一扫
1665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
