即時提示是Windows應用軟件的一種富有人情味的特色設計。當用戶不知道一個文字或圖片按鈕的功能時,只要把鼠標移動到這個按鈕,就會出現一個即時提示短語。在制作網頁時,同樣可以借助HTML語言給網絡文檔加上即時提示功能。 我們在開發英語網絡教材時,就利用了即時提示功能給每個生詞加上中文注釋。在本例中,對初三英語課文中的“Christmas is an important festival in Britain and many other parts of the world.”一句中的生詞Christmas、festival、Britain分別加上注釋功能,當用戶將鼠標移動到這些單詞上面時,就會在鼠標的旁邊顯示相應注釋。 那么,在網頁中如何實現這種即時提示功能呢?下面介紹兩種實現方法:
在鼠標旁邊顯示即時提示信息 這種方法是巧妙地利用HTML語言提供的標題元素〈TITLE〉...〈/TITLE〉。在新的HTML 4.0規范中,〈TITLE〉...〈/TITLE〉可以支持幾乎所有的元素,在本例中是將它與行內元素〈SPAN〉...〈/SPAN〉配合使用。〈SPAN〉...〈/SPAN〉元素是HTML 4.0規范新增加的通用行內容元素,在本例中利用它將要設置提示信息的單詞隔離開并分別設置各單詞的TITLE屬性。 實現的源代碼如下: 〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"〉 〈HTML〉 〈HEAD〉 〈TITLE〉網頁即時提示演示 〈/TITLE〉 〈!STYLE元素定義頂級元素BODY與行內元素SPAN的樣式〉 〈STYLE〉 BODY {cursor:default} SPAN {background-color:yellow} 〈/STYLE〉 〈/HEAD〉 〈BODY〉 〈H3〉Unit 14 Lesson 54〈/H3〉 〈P〉 〈!用行內元素SPAN將各個要設置提示的單詞單獨括起來并用TITLE元素設置提示信息〉 〈!本例中要設置提示信息的單詞分別為Christmas、festival、Britain〉 〈SPAN TITLE="Christmas--n.圣誕節"〉Christmas 〈/SPAN〉 is an important 〈SPAN TITLE="festival--n.&&&&adj.節日(的);喜慶(的)"〉festival 〈/SPAN〉 in 〈SPAN TITLE="Britain--n.英國;不列顛"〉Britain 〈/SPAN〉 and many other parts of the world. 〈/P〉 〈/BODY〉 〈/HTML〉
在窗口狀態行顯示提示信息 在上例中,提示信息是出現在鼠標旁邊。但如果要將提示信息都顯示在瀏覽窗口的狀態行,那該怎樣實現呢?在本例中實現的方法是將各個要設置提示信息的單詞都用超鏈接元素〈A〉...〈/A〉設置成超鏈形式,并在各個鏈接的onMouseMove與onMouSEOut事件中相應設置窗口WINDOW的STATUS屬性值(表示狀態行)。 實現的源代碼如下: 〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"〉 〈HTML〉 〈HEAD〉 〈TITLE〉網頁即時提示演示 〈/TITLE〉 〈STYLE〉 BODY {cursor:default} 〈/STYLE〉 〈/HEAD〉 〈BODY〉 〈H3〉Unit 14 Lesson 54〈/H3〉 〈P〉 〈!用超鏈元素A.../A將要設置提示信息的單詞分別設成超鏈形式〉 〈!HREF元素的值設置為"javascr〈!onMouseMove事件設置鼠標移動到該鏈接時的提示信息〉 〈!onMouseOut事件設置鼠標離開該鏈接時的提示信息為空白,即將提示信息清除〉 〈!window.status="某個字符串"表示在狀態行設置提示信息〉 〈A HREF="Javascript:void(null)" onMouseMove="window.status='Christmas--n.圣誕節'" onMouseOut="window.status=' '"〉Christmas 〈/A〉 is an important 〈A HREF="javascript:void(null)" onMouseMove="window.status='festival--n.&&&&adj.節日(的);喜慶(的)'" onMouseOut="window.status=' '"〉festival 〈/A〉 in 〈A HREF="javascript:void(null)" onMouseMove="window.status='Britain--n.英國;不列顛'" onMouseOut="window.status=' '"〉Britain 〈/A〉 and many other parts of the world. 〈/P〉 〈/BODY〉 〈/HTML〉