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

Presentation on theme: "CHAPTER 14 視窗與超連結的各種變化."— Presentation transcript:

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

2 視窗的各種變化 前一章是透過JavaScript來製作歡迎視窗。JavaScript還可以配合Windows的物件，製作出各種不同的視窗變化，底下將說明視窗的範例，讓你可以透過網頁來操作對話框。

3 選擇進入不同的網頁視窗 部分網站會設計二個版本，一個是複雜的動畫版，另一個則是文字版，讓使用者自己決定要瀏覽哪個版本。因為動畫版雖然漂亮，但是瀏覽網頁的時間也相對拉長，而文字版則是以文字為主，沒有複雜和花俏的網頁設計，針對不同的需求來讓瀏覽者自行選擇。

4 會移動的提示視窗 Windows物件所支援的JavaScript方法：

5 開啟視窗 open()方法可以開啟一個新的瀏覽器視窗。 其使用的參數如下： URL ─ 輸入網址 NAME ─ 輸入視窗的名稱
Width、Height ─ 設定視窗的大小

6 關閉視窗 close()可以用來關閉視窗。 加入JavaScript的設定，就可以讓視窗自動關閉。

7 透過按鈕關閉視窗 透過網頁來設定視窗的關閉時，會使用到『if ..eslf』敘述來判斷是否符合關閉視窗的條件。

8 14-2 框架視窗的特效 用HTML來設定框架是透過<frameset>標籤來設定，其實透過JavaScript也可以設定框架。
框架視窗的特效 用HTML來設定框架是透過<frameset>標籤來設定，其實透過JavaScript也可以設定框架。 透過JavaScript來設定框架的好處是可以避免網頁的內容被變更。

9 JavaScript的框架背景變色範例 用open()方法開啟新視窗時，可透過opener屬性在既有的視窗上開啟視窗，或使用frames、parent和top屬性來設定不同的框架。

10 避免框架網頁被使用 設定方法：透過if敘述來檢查，程式會比較windows物件和partent物件是否在文件的最上層，如果二者相等就表示網頁沒有被放在框架頁，若二者不相同那就將parent的檔案設定為目前視窗的檔案位置。

11 14-3 動態圖片的效果 所謂的動態圖片就是使用JavaScript來變更網頁中的圖片，讓靜態的圖片可以有更多不同的變化。 基本屬性：
動態圖片的效果 所謂的動態圖片就是使用JavaScript來變更網頁中的圖片，讓靜態的圖片可以有更多不同的變化。 基本屬性： src ─ 設定圖檔的檔名 name ─ 設定圖片的名字 width、height ─ 設定圖片的長寬 border ─ 設定是否加上邊框

12 滑鼠點選變更圖片 最常用的圖片變更方式就是透過滑鼠，當滑鼠移到圖片上方時切換圖片，當滑鼠移離圖片時，回復到原本的圖片。

13 圖片時鐘 圖片可以透過滑鼠游標的移動來設定變動，也可以透過日期方法的設定來讓圖片進行切換。

14 超連結動態圖片的變化 可以隨著瀏覽者點選的超連結之不同，來變更所顯示的圖片。

15 使用圖片做為滑鼠游標 滑鼠游標也可以應用動態圖片的效果，在滑鼠游標上加上圖片，就能讓圖片隨著滑鼠游標的移動而移動。

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

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