製作網頁圖片廣告連結－鄭穎仁

寵物親子臉嘟嘴 MLB HOLGA 避暑

製作網頁圖片廣告連結製作網頁圖片廣告連結用途設置於網頁中進行廣告輪播說明 □什麼是廣告輪播？就是在你的網頁中放置一個固定的廣告版位, 而廣告版位的廣告則每隔一段時就更換一個新的內容。 □如果瀏覽者對我們廣告版位內的廣告內容有興趣, 則他可在廣告出現後, 直接以滑鼠點選該廣告, 而連結至該廣告的網頁。 □本案例為圖片式的廣告輪播, 以陣列方式為廣告圖片與廣告鏈結進行配對, 可無限制增加輪播的項目。廣告圖片切換方式為【入廣告圖片, 圖片由小到大/圖片由大到小/入下一項廣告圖片, 圖片由小到大/】。鏈結特效則為：播出/滑鼠移出時, 圖片加上 100% 透明度的 Alpha 濾鏡效果（原圖顯示）；滑鼠移入時, 圖片加上 50% 透明度的 Alpha 濾鏡效果。範例網頁文件入時（OnLoad）呼叫「imgStretch」函數開始配置第 1 組廣告, 並將廣告圖片由小到大進行漸變, 當廣告圖片到達指定的寬度與長度時, 依指定的停留時間顯示該廣告圖片。達到指定的廣告圖停留顯示時間後, 呼叫「imgShirk」函數開始縮小廣告圖片。當圖片寬度與長度小於等於0時, 呼叫「imgIni」函數指定下 1 組輪播的廣告。範例原始碼 <html> <head> <title>圖片廣告連結</title> <SCRIPT language="JavaScript"> imgwidth=400 //圖片高度 imgheight=250 //圖片寬度 imgPauseTime=5000 //圖片停留時間 imgSpeed=20 //圖片特效速度 chgLoop=0 imgCount=0 doChg=true //廣告圖片來源 imgSrc=new Array() imgSrc[0]="img/p000.jpg" imgSrc[1]="img/p001.jpg" imgSrc[2]="img/p002.jpg" imgSrc[3]="img/p003.jpg" imgSrc[4]="img/p004.jpg" //廣告圖片的超鏈結 imgURL=new Array() imgURL[0]="http://www..twbts.com" imgURL[1]="http://gb.twbts.com" imgURL[2]="http://www..twbts.com" imgURL[3]="http://gb.twbts.com" imgURL[4]="http://www..twbts.com" //建立影像物件陣列, 並將圖片檔案預先儲存物件內 imgArray=new Array() for (x=0;x<=imgSrc.length-1;x++) { imgArray[x]=new Image() imgArray[x].src=imgSrc[x] } //圖片設定 function imgIni() { doChg=true imgCount++ if (imgCount>=imgSrc.length){ imgCount=0 } imgStretch() } //圖片放大效果 function imgStretch() { if(doChg){ if (chgLoop<=100) { if (document.all) { imgArea.innerHTML="<a href='"+imgURL[imgCount] + "' target='_blank'><img name='myPic' width='" + chgLoop*imgwidth/100 + "' height='"+chgLoop*imgheight/100+"' src='" + imgArray[imgCount].src + "' border='0'></a>" } chgLoop+=10 timer=setTimeout("imgStretch()", imgSpeed) } else { chgLoop=100 clearTimeout(timer) imgArea.innerHTML="<a href='"+imgURL[imgCount] + "' target='_blank'><img name='myPic' src='" + imgArray[imgCount].src + "' border='0'></a>" timer=setTimeout("imgShirk()", imgPauseTime) } } } //圖片縮小效果 function imgShirk() { if(doChg){ if (chgLoop>=0) { if (document.all) { imgArea.innerHTML="<a href='"+imgURL[imgCount] + "' target='_blank'><img name='myPic' width='" + chgLoop*imgwidth/100 + "' height='" + chgLoop*imgheight/100 + "' src='" + imgArray[imgCount].src + "' border='0'></a>" } chgLoop-=10 timer=setTimeout("imgShirk()", imgSpeed) } else { chgLoop=0 clearTimeout(timer) imgIni() } } } //滑鼠指標移入時 function mouse_in() { document.myPic.style.filter="Alpha(Opacity=50)" doChg=false } //滑鼠指標移出時 function mouse_out() { document.myPic.style.filter="Alpha(Opacity=100)" doChg=true clearTimeout(timer) imgStretch() } </SCRIPT> </head> <body bgcolor="#FFFFFF" onLoad="imgStretch()"> <center> <table cellspacing="0" cellpadding="0"> <tr><td> <img border="0" src="img/topc.gif"></td></tr> <tr><td> <div id="imgArea" bgcolor="#FFFFFF" onMouseOver="mouse_in()" onMouseOut="mouse_out()"></div> </td></tr><tr><td> <img border="0" src="img/buttomc.gif"></td> </tr></table> </body> </html> 本文選錄自《JavaScript 精緻範例辭典》