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 超連結動態效果

圖片配合超連結可以作出不少的變化，單單是網頁上所出現的超連結也可以有不同的顯示方式。

隨機出現的廣告連結

不少網頁上都會放置廣告，為了避免過多的廣告佔據網頁的空間，所以會設計廣告時隨機出現，讓使用者每次都看到不同的廣告。