返回列表下一主題上一主題發帖

[分享] 製作網頁圖片廣告連結

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1195
主題: 395
精華: 113
積分: 1747
點名: 0
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2025-5-11

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 倒序看帖

打印

字體大小: tT

發表於 2010-6-4 01:42 | 只看該作者

[分享] 製作網頁圖片廣告連結

javascript, 廣告, 圖片, 輪播

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

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

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

□本案例為圖片式的廣告輪播, 以陣列方式為廣告圖片與廣告鏈結進行配對, 可無限制增加輪播的項目。廣告圖片切換方式為【載入廣告圖片, 圖片由小到大/圖片由大到小/載入下一項廣告圖片, 圖片由小到大/】。鏈結特效則為：播出/滑鼠移出時, 圖片加上 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 精緻範例辭典
		不管您是設計動態網頁，或是要用最新的 Ajax 技術，Javascript 都佔了相當吃重的角色. 但是就算學過 Javascript，也不一定都會記得各式各樣的語法，因此一本隨時可以查閱的範例辭典就非常需要。 1.簡易的Javascript 語法入門及基礎觀念，幫助您快速了解JavaScript的使用方式。 2.搭配圖文解說及精美範例示範，讓您不但看得懂，還能馬上知道要怎麼用，是您在設計網頁時最方便的參考書。 3.最後加入 10 個精選綜合範例，讓您了解這些語法是如何實際運用在網頁中。 4.清楚標示適用的各種瀏覽器種類與版本，符合實際需求。 5.光碟中收錄完整的範例網頁檔案，方便您直接取用和修改再運用。

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

靜思自在 : 忘功不忘過，忘怨不忘恩。

返回列表下一主題上一主題