上次按照书上写了简单的javascript翻转器,这次写了发杂点的,这个翻转器将图片加载到缓存中,从而造成从服务器获得图像造成的缓存.
需要的文件是,图片(xx.gif)和要反转的图片(xx_on.gif).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复杂点的翻转器</title>
<script>
window.οnlοad=rolloverInit;
function rolloverInit(){
//查找图片文件,如果是图片且父标签是<a>就传递给setupRollover.
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();//获得传递过来的图像对象,并在其中添加outImage属性.
thisImage.outImage.src=thisImage.src;
thisImage.οnmοuseοut=function(){
thisImage.src=thisImage.outImage.src;//鼠标不在图片上,图片就是原图片.
}
thisImage.overImage=new Image();
thisImage.overImage.src="images/"+thisImage.id+"_on.gif";//在其中添加overImage属性.
thisImage.οnmοuseοver=function(){
thisImage.src=thisImage.overImage.src;//鼠标在上上面,图片替换为新图片.
}
}
</script>
</head>
<body>
<a href="#"><img src="images/cat.gif" name="cat" width="247" height="192" id="cat" /></a>
<a href="#"><img src="images/dog.gif" name="cat" width="247" height="192" id="dog" /></a>
</body>
</html>