旗標知識網 Banner Advertisement
     
 
JavaScript 精緻範例辭典
JavaScript 精緻範例辭典

作者:楊東昱著
書號:F6491
附件:附1片光碟片
定價:450 元
 
 
 
 
 
 
 
製作網頁圖片廣告連結

製作網頁圖片廣告連結

用途
設置於網頁中進行廣告輪播

說明
□什麼是廣告輪播?就是在你的網頁中放置一個固定的廣告版位, 而廣告版位的廣告則每隔一段時就更換一個新的內容。

□如果瀏覽者對我們廣告版位內的廣告內容有興趣, 則他可在廣告出現後, 直接以滑鼠點選該廣告, 而連結至該廣告的網頁。

□本案例為圖片式的廣告輪播, 以陣列方式為廣告圖片與廣告鏈結進行配對, 可無限制增加輪播的項目。廣告圖片切換方式為【載入廣告圖片, 圖片由小到大/圖片由大到小/載入下一項廣告圖片, 圖片由小到大/】。鏈結特效則為:播出/滑鼠移出時, 圖片加上 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>

 

 

 
Down Logo 旗 標 出 版 股 份 有 限 公 司   100 台北市中正區杭州南路一段15-1號19樓 TEL: 02-2396-3257
Copyright © 2005 Flag Publishing Co.,Ltd. All Rights Reserved    版權所有聯絡我們合作提案隱私權政策
 
現在購買《DSLR 完全探索》《數位相片編修聖經》《數位列印/輸出聖經》《數位相機Raw檔聖經》四書,超值優惠2299元 下載訂購單