相关文章
网站建设空格的宽度问题
北京网站制作使用DIV+CSS制作网页后，表格Table还有用吗？
北京网站制作HTML中的表格元素
网页设计有关HTML代码的另类应用技巧
网站设计把XHTML／CSS页面转换成为打印机页面
北京网站设计Dreamweaver中幂格式文本巧实现
北京网站建设Flash处理XML文档数据教程
北京网站制作Flash MX 2004编程教程(三)
网站设计FLASH MX 2004视频教程:走！咱们踏春去(四)
北京网站制作flash打造动画特效
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网站制作北京网页设计给网页文字加上即时提示
北京网站制作北京网页设计给网页文字加上即时提示
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
即时提示是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〉 www.qitongnet.com 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〉
企通互联
我们在开发英语网络教材时，就利用了即时提示功能给每个生词加上中文注释。在本例中，对初三英语课文中的“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〉 www.qitongnet.com 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〉