麻辣家族討論版版 - Powered by Discuz! Board

標題: [教學] (教學第26篇)影像物件下篇 [打印本頁]

作者: 小誌 時間: 2010-5-19 02:24 標題: (教學第26篇)影像物件下篇

結合陣列
若我們需要建立的影像物件非常多，你要是不趕時間，大可一個物件一個物件慢慢地建立，但是，這樣將使程式的執行顯得沒效率，同時，網頁文件的體積無形中也就增大了許多。

還記得之前我們介紹過的變數陣列嗎？陣列是變數的集合，它可以存放多筆型態相同的資料，所以，當你需要建立多個相同型態的物件時，不妨多多利用陣列把它們集合起來，該如何建立物件陣列呢？照例，先把陣列物件建立出來：

mypic = new Array()

複製代碼

接著，先想想你要在陣列內放置多少筆資料，然後利用for迴圈敘述將資料逐筆的放入陣列去，或者是將陣列內的元素建立成其他的物件：

mypic = new Array()
for (x=0;x<10;x++)
{
mypic[x] = new Image()
}

複製代碼

在上列這個程式片斷中：
for迴圈將會重複執行10次（x=0到9），當for迴圈第一次執行時，x=0，mypic[x]就等於mypic[0]，也就說：我們將陣列mypic編號位置為0的元素建立成為一個Image物件；當for迴圈第二次執行時，x=1，mypic[x]就等於mypic[1]，我們將陣列mypic編號位置為1的元素也建立成為一個Image物件，當for迴圈執行完後，我們也就將陣列mypic編號位置0到9的元素都建立成Image物件了，而且這些Image物件全部集合在陣列mypic內。

當然，在for迴圈內我們也可以同時將資料加入於陣列元素內：

for (x=0;x<10;x++)
{
mypic [x] =new Image()
mypic [x].src = "test.gif"
}

複製代碼

在上列這個程式片斷中：
因為我們將陣列中的元素建立成為Image物件，所以，陣列元素也就擁有src（影像檔案）的屬性，當我們將影像檔案存放至陣列元素中，也就不會有任何的錯誤發生了！

實例學習：
使用影像物件與影像物件陣列。

<HTML>
<HEAD>
<TITLE>圖片式小時鐘</TITLE>
</HEAD>
<SCRIPT Language="JavaScript">
//建立陣列變數
clockimage=new Array()
//利用for迴圈將陣列元素建立成為影像物件
for (x=0;x<10;x++)
{
clockimage[x]=new Image()
//將影像檔案存放至陣列元素中
clockimage[x].src=x+".gif"
}
function myclock()
{
//建立日期時間物件
inTime=new Date
//小時
Hour="0"+inTime.getHours()
Hour=Hour.substring(Hour.length-2,Hour.length)
Hour1=Hour.charAt(1)
Hour0=Hour.charAt(0)
//分鐘
Minute="0"+inTime.getMinutes()
Minute=Minute.substring(Minute.length-2,Minute.length)
Minute1=Minute.charAt(1)
Minute0=Minute.charAt(0)
//秒
Second="0"+inTime.getSeconds()
Second=Second.substring(Second.length-2,Second.length)
Second1=Second.charAt(1)
Second0=Second.charAt(0)
//更新網頁中的時間圖片
document.hh1.src=clockimage[Hour0].src
document.hh2.src=clockimage[Hour1].src
document.mm1.src=clockimage[Minute0].src
document.mm2.src=clockimage[Minute1].src
document.ss1.src=clockimage[Second0].src
document.ss2.src=clockimage[Second1].src
//建立動態時間機制
setTimeout("myclock()",1000)
}
</SCRIPT>
<BODY onLoad="setTimeout('myclock()',1000)">
<IMG SRC="0.gif" NAME="hh1">
<IMG SRC="0.gif" NAME="hh2">
<IMG SRC="x.gif">
<IMG SRC="0.gif" NAME="mm1">
<IMG SRC="0.gif" NAME="mm2">
<IMG SRC="x.gif">
<IMG SRC="0.gif" NAME="ss1">
<IMG SRC="0.gif" NAME="ss2">
</BODY>
</HTML>

複製代碼

作者: 小誌 時間: 2010-5-19 02:28

廣告看板
你的網頁頁面空間是非常值錢的你知道嗎？光是台灣地區的上網人口就已經超過兩百萬，如果你的網站人氣很高，每天前往瀏覽的人次不計其數，那你就可以大大方方的開始作廣告生意了！相信很的公司一定希望把它們的廣告放置在你的網站裡，希望讓很多人看到它們公司的產品或活動，收取一點廣告費，讓你的網站能更長久的經營，這可是好事一件。

當你正高興很多公司願意在你的網站上掛宣傳招牌(Banner)時，這時你卻開始擔心起來了，總不能在網站中掛滿廣告吧！誰喜歡看電視節目時，正常的節目內容很短而廣告的時間卻那麼長？那怎麼辦呢？解決的方法就是使用廣告輪撥！
[attach]717[/attach]

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

如果瀏覽者對我們廣告版位內的廣告內容有興趣，則他可在廣告出現後，直接以滑鼠點選該廣告圖片而連結至該廣告的網頁，以上圖為例，當你按下『麻辣家族-網頁設計討論區』的圖片時，就會進入『麻辣家族-網頁設計討論區』的專屬網頁去。

為了達到廣告播出的公平性，當瀏覽者進入我們的網頁時，廣告的內容將會隨機的顯示『麻辣家族-網頁設計討論區』、『麻辣家族-程式設計討論區』、『麻辣家族-MS OFFICE討論區』中的某一張廣告圖片。
當瀏覽者按下瀏覽器上的『重新整理』按鈕時，廣告的內容也是採隨機的顯示方式。
當我們在圖片上點選該廣告圖片，將因廣告的不同而連結至不同的廣告的網頁。
[attach]718[/attach]
假設我們預留的廣告版位是468*60的像素大小，那在準備廣告圖片時，所有的廣告圖片也要是468*60的像素大小，以免破壞我們網頁整體的版面配置。

本單元所介紹的廣告看板程式，主要分成四大部分：隨機選定廣告圖片、影像圖片的處理、點選廣告圖片所要鏈結的網址與廣告圖片的變換。

作者: 小誌 時間: 2010-5-19 02:31

程式部分：
首先我們必須先來設定幾個變數，第一個變數picnum：設定我們廣告版位中有幾個廣告要進行輪播；第二個變數changetime：廣告版位中的每個廣告要顯示多少的時間（圖片切換的時間,1000個單位為一秒鐘）；最後一個變數bannerNum：利用變數選取出來，第一次進入網頁或重新整理時所要顯示的第一個廣告。

//設定廣告的數量
picnum=3
//3000 為圖片切換的時間,1000個單位為一秒鐘
changetime=3000
//設定第一次進入網頁或重新整理時所要顯示的第一個廣告
bannerNum = Math.floor(Math.random()*picnum)

複製代碼

提示！！
Math.random()是一個JavaScript內建的亂數產生器，它是利用系統時間自由隨機產生介於0至1的亂數，所以我們將亂數取出的值乘上廣告的數量，再以Math.floor()無條件捨去小數成最接近的整數，所得的整數就是第一個顯示的廣告順序。

接著我們建立一個陣列物件theImages，同時利用for迴圈敘述將陣列元素建立成影像物件，for迴圈敘述執行的次數就是影像物件的數量，請注意：for迴圈敘述的終止條件是當迴圈變數i的值小於等於我們廣告圖片的數量，在for迴圈敘除了將陣列元素建立成影像物件外，同時還將圖片檔案預存到陣列元素中：

//建立陣列物件
theImages=new Array()
for(i=1; i<=picnum; i++)
{
//將陣列元素型態指定為影像物件
theImages[i]=new Image()
//將圖片檔案預先載入陣列元素中
//banner為連續廣告圖檔的前置檔名,可自行更改
theImages[i].src="banner"+i+".gif"
}

複製代碼

RotateBanner()函式，是執行廣告圖片更換工作的函式，目前廣告版面中該顯示哪一張廣告圖片是由bannerNum變數所決定，如果bannerNum變數等於1，則顯示第一張廣告圖片，然後依序變更顯示的廣告圖片，但是，當bannerNum變數的值大過我們廣告圖片數量時，其值就再設定為1，重頭開始輪播廣告。當我們將bannerNum變數的值指定給陣列theImages時，將可以取的預存在陣列元素中的廣告圖片檔案，並將該廣告圖片在網頁中顯示出來。

在rotateBanner()函式的最後，利用setTimeout()計時函式在達到我們預設的廣告圖片切換時間時，重新執行rotateBanner()函式，以達到廣告圖片輪播的效果！

//廣告圖片更換函式
function rotateBanner()
{
//將廣告的圖片的順序往下移動
bannerNum++
//萬一顯示順序的值大於廣告圖片的數量
//則設定顯示順序重新開始
if(bannerNum > picnum)
{
bannerNum = 1
}
//更換廣告版位的廣告圖片
document.ListImage.src=theImages[bannerNum].src
setTimeout("rotateBanner()",changetime)
}

複製代碼

clickBanner()函式，是執行瀏覽位置轉向的函式，我們依照輪播的廣告圖片順序變數bannerNum來決定按下廣告圖片所要鏈結的網址，在本範例中，因為輪播的廣告圖片只有三個，所以鏈結的網址的判斷也就只有三個。

function clickBanner()
{
if(bannerNum == 1)
{
window.location="http://gb.twbts.com/twbtsbbs.pl"
}
if(bannerNum == 2)
{
window.location="http://gb.twbts.com/dgrbbs.pl"
}
if(bannerNum == 3)
{
window.location="http://gb.twbts.com/officebbs.pl"
}
}

複製代碼

作者: 小誌 時間: 2010-5-19 02:33

網頁文件部分：
在我頁中我們必須建立一個顯示廣告圖片的影像元件，在本例中，我們將它定名為ListImage（NAME="ListImage"），按下這個影像元件則必須將瀏覽位置轉向至與此時顯示中廣告圖片相對應的網址去，所以我們還必須設置一個<A HREF>超鏈結標籤，而按下超鏈結標籤後，它所鏈結的網址則是JavaScript虛擬協定的鏈結「javascript:clickBanner()」，用來呼叫clickBanner()函式來轉向鏈結網址。

<A HREF="javascript:clickBanner()">
<IMG NAME="ListImage" SRC="banner1.gif" BORDER="0">
</A>

複製代碼

[attach]720[/attach]

最後，為了讓網頁載入時就產生廣告輪播的效果，所以我們在<BODY>標籤內佈置了一個onLoad事件處理器，以便在網頁載入時就呼叫rotateBanner()函式，開始廣告圖片輪播的效果！
廣告看板原始碼

<HTML>
<HEAD>
<TITLE>廣告看板</TITLE>
<SCRIPT LANGUAGE="JavaScript">
//設定廣告的數量
picnum=3
//3000 為圖片切換的時間,1000個單位為一秒鐘
changetime=3000
//設定第一次進入網頁或重新整理時所要顯示的第一個廣告
bannerNum = Math.floor(Math.random()*picnum)
//建立陣列物件
theImages=new Array()
for(i=1; i<=picnum; i++)
{
//將陣列元素型態指定為影像物件
theImages[i]=new Image()
//將圖片檔案預先載入陣列元素中
//banner為連續廣告圖檔的前置檔名,可自行更改
theImages[i].src="banner"+i+".gif"
}
//敲擊廣告圖片時的鏈結轉向函式
function clickBanner()
{
if(bannerNum == 1)
{
window.location="http://gb.twbts.com/twbtsbbs.pl"
}
if(bannerNum == 2)
{
window.location="http://gb.twbts.com/dgrbbs.pl"
}
if(bannerNum == 3)
{
window.location="http://gb.twbts.com/officebbs.pl"
}
}
//廣告圖片更換函式
function rotateBanner()
{
//將廣告的圖片的順序往下移動
bannerNum++
//萬一顯示順序的值大於廣告圖片的數量
//則設定顯示順序重新開始
if(bannerNum > picnum)
{
bannerNum = 1
}
//更換廣告版位的廣告圖片
document.ListImage.src=theImages[bannerNum].src
setTimeout("rotateBanner()",changetime)
}
</SCRIPT>
</HEAD>
<BODY onLoad="rotateBanner()">
<CENTER>
<A HREF="javascript:clickBanner()">
<IMG NAME="ListImage" SRC="banner1.gif" BORDER="0">
</A>
</CENTER>
</BODY>
</HTML>

複製代碼

歡迎光臨麻辣家族討論版版 (http://forum.twbts.com/)