Transcript CHAPTER 14 視窗與超連結的各種變化

CHAPTER 14
視窗與超連結的各種變化
14-1 視窗的各種變化

前一章是透過JavaScript來製作歡迎視窗。
JavaScript還可以配合Windows的物件，製作
出各種不同的視窗變化，底下將說明視窗的範
例，讓你可以透過網頁來操作對話框。
選擇進入不同的網頁視窗

部分網站會設計二個版本，一個是複雜的動畫
版，另一個則是文字版，讓使用者自己決定要
瀏覽哪個版本。因為動畫版雖然漂亮，但是瀏
覽網頁的時間也相對拉長，而文字版則是以文
字為主，沒有複雜和花俏的網頁設計，針對不
同的需求來讓瀏覽者自行選擇。
會移動的提示視窗

Windows物件所支援的JavaScript方法：
開啟視窗


open()方法可以開啟一個新的瀏覽器視窗。
其使用的參數如下：
–
–
–
URL ─ 輸入網址
NAME ─ 輸入視窗的名稱
Width、Height ─ 設定視窗的大小
關閉視窗


close()可以用來關閉視窗。
加入JavaScript的設定，就可以讓視窗自動關
閉。
透過按鈕關閉視窗

透過網頁來設定視窗的關閉時，會使用到
『if ..eslf』敘述來判斷是否符合關閉視窗的條
件。
14-2 框架視窗的特效


用HTML來設定框架是透過<frameset>標籤來
設定，其實透過JavaScript也可以設定框架。
透過JavaScript來設定框架的好處是可以避免
網頁的內容被變更。
JavaScript的框架背景變色範例

用open()方法開啟新視窗時，可透過opener屬
性在既有的視窗上開啟視窗，或使用frames、
parent和top屬性來設定不同的框架。
避免框架網頁被使用

設定方法：透過if敘述來檢查，程式會比較
windows物件和partent物件是否在文件的最上
層，如果二者相等就表示網頁沒有被放在框架
頁，若二者不相同那就將parent的檔案設定為
目前視窗的檔案位置。
14-3 動態圖片的效果


所謂的動態圖片就是使用JavaScript來變更網
頁中的圖片，讓靜態的圖片可以有更多不同的
變化。
基本屬性：
–
–
–
–
src ─ 設定圖檔的檔名
name ─ 設定圖片的名字
width、height ─ 設定圖片的長寬
border ─ 設定是否加上邊框
滑鼠點選變更圖片

最常用的圖片變更方式就是透過滑鼠，當滑鼠
移到圖片上方時切換圖片，當滑鼠移離圖片時，
回復到原本的圖片。
圖片時鐘

圖片可以透過滑鼠游標的移動來設定變動，也
可以透過日期方法的設定來讓圖片進行切換。
超連結動態圖片的變化

可以隨著瀏覽者點選的超連結之不同，來變更
所顯示的圖片。
使用圖片做為滑鼠游標

滑鼠游標也可以應用動態圖片的效果，在滑鼠
游標上加上圖片，就能讓圖片隨著滑鼠游標的
移動而移動。
14-4 超連結動態效果

圖片配合超連結可以作出不少的變化，單單是
網頁上所出現的超連結也可以有不同的顯示方
式。
隨機出現的廣告連結

不少網頁上都會放置廣告，為了避免過多的廣
告佔據網頁的空間，所以會設計廣告時隨機出
現，讓使用者每次都看到不同的廣告。