翻转器在网页中的应用并不少见，下面我将介绍两种用JS实现的方法，以供学习：
第一种：主要是利用getAttribute及setAttribute这两个函数，以下是HTML，CSS及JS代码：
HTML：
<div> <ul id="imgs"> <li><a href="images2/pic1.jpg" class="ss" id="pic1">图片1</a></li> <li><a href="images2/pic2.jpg" class="ss" id="pic2">图片2</a></li> <li><a href="images2/pic3.jpg" class="ss" id="pic3">图片3</a></li> </ul> </div> <img src="images1/1.png" title="1" id="pic4"/>
CSS：
*{ margin:0; padding:0; } #imgs li{ display:inline; line-height:60px; list-style:none; } a:link,a:visited{ color:#CCCCCC; } a:hover,a:active{ color:#CC0000; }
JS：
window.οnlοad=rollOver; function rollOver(){ if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.getElementById("imgs")) return false; var imgs=document.getElementById("imgs"); if(imgs){ var links=imgs.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ links[i].οnclick=function(){ return showPic(this)?false:true; } } } } function showPic(whichPic){ var pic=whichPic.getAttribute("href"); var place=document.getElementById("pic4"); place.setAttribute("src",pic); return true; }
第二种：通过遍历，设置class属性，具体代码如下：
window.onload = rolloverInit; function rolloverInit(){ for(var i=0; i<document.links.length; i++){ var linkObj = document.links[i]; if(linkObj.className){ var imgObj = document.getElementById(linkObj.className); if(imgObj){ setupRollover(linkObj, imgObj); } } } } function setupRollover(thisLink, textImage){ thisLink.imgToChange = textImage; thisLink.οnclick=function(){ this.imgToChange.src=this.clickImage.src; return false; } thisLink.clickImage=new Image(); thisLink.clickImage.src="images2/"+thisLink.id+".jpg"; }
HTML及CSS代码同第一种
两种方法均可以得到如下效果图：（图片翻转效果在点击链接后发生）
