js 網頁開發

[Javascript]橫跨五大瀏覽器-滑鼠滑入動態改變影像

2009/03/06

  這一篇的前身,就是[DW]產品目錄展示,經梅干想了一下,感覺用這名稱應該更貼切,其實該範例是拿DW內建滑入滑出的功能再作點小加工,讓原本滑進滑出變換影像的地方,改顯示在上方的圖片中,由於先前在加工時,忘了作瀏覽器的判斷,以至於在IE7、IE8出現圖片無法顯示的問題,好在有好友男丁格爾的幫忙下,修正了這一個bug,再經由梅干的測試下,該範例無論是在IE6.0、IE7.0、IE8.0、Firefox2、Fireox3、Google Chrome、Safari、Opera都可正常的運作,這一切都要歸功於男丁格爾 大大


photobook.html
<!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=big5” />
<title>網路相簿</title>
<script type=“text/javascript”>
var num=1;
var _ie = true;
//判斷瀏覽器
 function mm_borwser(){
    if (window.XMLHttpRequest) { //Mozilla, Safari,…IE7
if(!window.ActiveXObject){// Mozilla, Safari,… _ie = false; document.getElementById(“mmmm_showpic”).innerHTML=”<img src=\“img/C301b.jpg\” width=\“550\” height=\“367\” id=\“showimg\” style=\“-moz-opacity:0\“/>”; mm_fadein(); } }
if(_ie){//IE6
    document.getElementById("mmmm_showpic").innerHTML="&lt;img src=\"img/C301b.jpg\" width=\"550\" height=\"367\"  id=\"showimg\" style=\"filter:alpha(opacity=0);\"/&gt;";
    mm_fadein();     
}   

} //圖片預載 function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //大圖載入 function mm_showpic(img){ if(!_ie){// Mozilla, Safari,… document.getElementById(“showimg”).style.MozOpacity=0;
}else{//IE6 document.getElementById(“showimg”).filters.alpha.opacity=0;
} document.getElementById(“showimg”).src = img;
mm_fadein(1); } //淡化效果 function mm_fadein(n){ if(!_ie){// Mozilla, Safari,… var n; if(n==1){ num=1; } if(num !=20) { num+=1; document.getElementById(“showimg”).style.MozOpacity=num/20;
}
}else{//IE6 var n; if(n==1){ num=1; } if(num !=100) { num+=3; document.getElementById(“showimg”).filters.alpha.opacity=num;
} } setTimeout(‘mm_fadein()‘,0.01); //設定圖片變化速度 } </script> </head>

<body onLoad=“mm_borwser();MM_preloadImages(‘img/C301b.jpg’,‘img/C302b.jpg’,‘img/C303b.jpg’,‘img/C304b.jpg’,‘img/C305b.jpg’)”> <table width=“400” border=“0” cellpadding=“3” cellspacing=“3” bgcolor=“#CCCCCC”> <tr> <td height=“367” colspan=“5” align=“center” valign=“middle”> <div id=“mmmm_showpic”></div></td> </tr> <tr> <td align=“center” valign=“middle” bgcolor=“#FFFFFF”> <img src=“img/C301s.jpg” width=“80” height=“53” onMouseOver=“mm_showpic(‘img/C301b.jpg’);” style=“cursor:pointer;“/></td> <td align=“center” valign=“middle” bgcolor=“#FFFFFF”> <img src=“img/C302s.jpg” width=“80” height=“53” onMouseOver=“mm_showpic(‘img/C302b.jpg’);” style=“cursor:pointer;“/></td> <td align=“center” valign=“middle” bgcolor=“#FFFFFF”> <img src=“img/C303s.jpg” width=“80” height=“53” onMouseOver=“mm_showpic(‘img/C303b.jpg’);” style=“cursor:pointer;“/></td> <td align=“center” valign=“middle” bgcolor=“#FFFFFF”> <img src=“img/C304s.jpg” width=“80” height=“53” onMouseOver=“mm_showpic(‘img/C304b.jpg’);” style=“cursor:pointer;“/></td> <td align=“center” valign=“middle” bgcolor=“#FFFFFF”> <img src=“img/C305s.jpg” width=“80” height=“53” onMouseOver=“mm_showpic(‘img/C305b.jpg’);” style=“cursor:pointer;“/></td> </tr> </table> </body> </html>


[範例預覽] [範例下載]