当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 给网页文字加上即时提示

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 给网页文字加上即时提示


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 36 ::
收藏到网摘: n/a

  即时提示是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元素的值设置为"javascript:void(null)"表示该链接为空链接,不链接到其他地方〉
〈!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〉
 

评论 (0) All

登陆 还没注册?