Dreamweaver, 網頁設計

[DW]產品目錄展示

梅干2008/12/17
  雖然加入了淡化效果,但當第一次載入時,可發現到滑鼠碰到小圖時,大圖無法即時呈現的問題,以及遇到不同瀏覽器預覽時讀取不同的檔案,似乎是有點給他的不人性,因此花了一點時間來解決上列問題,目前此版本加入了圖片預載以及自動判別瀏覽器的功能,只需修改如下:

【修改1】 將原本內的Script碼替換成下列語法:

<script type="text/javascript">
var num=1;
//判斷瀏覽器
function mm_borwser(){ 
if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7  
if(!window.ActiveXObject){// Mozilla, Safari,...  
document.getElementById("mmmm_showpic").innerHTML=
"<img src=\"img/C301b.jpg\" width=\"550\" height=\"367\"
id=\"showimg\"    
style=\"-moz-opacity:0\"/>";   
mm_fadein(); 
}
 
}else{//IE6    
document.getElementById("mmmm_showpic").innerHTML="    
<img src=\"img/C301b.jpg\" width=\"550\" height=\"367\" id=\"showimg\" style=\"filter:alpha(opacity=0);\"/>";
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 (window.XMLHttpRequest) { //Mozilla, Safari,...IE7  
if(!window.ActiveXObject){// Mozilla, Safari,...  
document.getElementById("showimg").style.MozOpacity=0;  
document.getElementById("showimg").src = img;   
mm_fadein(1); 
} 
}else{//IE6  
document.getElementById("showimg").filters.alpha.opacity=0;  
document.getElementById("showimg").src = img;   
mm_fadein(1);  
}
}
//淡化效果
function mm_fadein(n){ 
if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7  
if(!window.ActiveXObject){// Mozilla, Safari,...  
var n;  
if(n==1){
num=1;  
}  
if(num !=20) {   
num+=1;   
document.getElementById("showimg").style.MozOpacity=num/20;   
setTimeout('mm_fadein()',0.01); //設定圖片變化速度   
}
} 
}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>

※重點提示:上列紅色字為一開始所要載入大圖的檔案位置與名稱。


【修改2】 將原本 內的onload=””事件替換成下列語法:

onload="mm_borwser();
MM_preloadImages('img/C301b.jpg','img/C302b.jpg',
'img/C303b.jpg','img/C304b.jpg','img/C305b.jpg')"


【修改3】 將原本<img id="showimg …替換成下列標籤:
<div id="mmmm_showpic"></div>
[範例預覽] [範例下載]


UAG軍規iPhone防摔殼