给网页文字加上即时提示

网页

即时提示是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.圣诞节'"
〉Christmas 〈/A〉 is an important
〈A HREF="javascript:void(null)"
onMouseMove="window.status='festival--n.&&&&adj.节日(的);喜庆(的)'"
〉festival 〈/A〉 in
〈A HREF="javascript:void(null)"
onMouseMove="window.status='Britain--n.英国;不列颠'"
〉Britain 〈/A〉 and many other
parts of the world.
〈/P〉
〈/BODY〉
〈/HTML〉

时间: 2024-09-10 18:00:57

给网页文字加上即时提示的相关文章

我要看代码 破解加密网页文字有高招

加密|破解|网页 相信大多数人的机器上都装有一种或多种文字.网页编辑软件,如:功能强大的高级软件Dreamweaver MX.Word XP,系统自带比较低级的软件NotePad.WordPad.而且这些软件之间存在着高级软件兼容低级软件对文字的修饰,亦即:低级软件能过滤掉高级软件对文字的修饰. 比如:我们在Word XP中给一段文字加上颜色.超链接,然后把这段文字"剪切-复制"到NotePad中,然后再将它"剪切-复制"到Word XP中,这时一定可以看到,先前对

网页文字无法复制?看这里

  网站对网页加密之后,用户无法复制网页中的文字,用下列方法可破解. 1.按CTRL+A键将网页选中,"复制",然后从中选取需要的文字即可. 2.调用源文件.选择菜单"查看",点击"源文件",打开记事本就能看到网页的全部文字,选取你需要的即可. 3.点击IE的"工具/Internet"菜单,进入"安全"标签页,选择"自定义级别",将所有脚本全部禁用然后按F5键刷新网页,然后选取.(提示:

编辑的好帮手 网页文字的处理技巧

众所周知,网页文字的排版设计对于页面的整体效果有着非常重要的影响.就象传统的报刊杂志一样,我们将网页看作一张报纸.一本杂志来进行文字的排版处理,针对不同的需要,有可能需要使用一些特殊的文字排版技巧.比如做一个介绍古文的网页时,我们可能会用到文字竖排.文字从右读起的效果以增强页面表现力:做一个新闻页面,可能会用到段落首字下沉等效果,用以强调某条新闻. 在一张报纸上.一本杂志上要实现这些效果并不难,但是我们如何在网页上实现这样的效果呢?下面就向大家介绍几种文字排版处理的技巧. 1.段落首行自动缩进

网页文字该多大?文字字号详解

网页|详解 文字在网页上的应用: (只看小标题您就能知道这一部分要说什么了,为了避免罗嗦,在此文发布前决定把此处300余字删除,只保留了下面这一句.) 对于一个设计的好的网站来说,用户浏览时间最长的是文章正文. 中文网页文字的现状: 中文网页普遍使用12px和14px的宋体(simsun),这两种文字都可以加粗(font-weight: bold).这个规范似乎也成了网页设计师的基本 常识. 中国的网页设计师有这4种可供选择的文字表现方式,仅仅是4种,只有这4种,4种很小的文字.其中12px的宋

利用PHP和CSS改变网页文字大小

  用PHP和CSS改变网页文字大小--在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法. 在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法.聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气. 文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要

WPS2005中轻松给文字加上边框

在WPS2005的"格式"工具栏中并没有直接给文字加框的工具,那么,怎样才能给文字加上外框呢? 其实很简单,只要点击菜单命令"视图→工具栏→其它格式",如图1所示.显示"其它格式"工具栏,然后点击工具栏中第一个按钮"字符边框",此后再输入的文字就自动加上边框了,如图2所示. 先选中文字,再点击此按钮,也可以达到同样的效果.如果不再需要加边框,那么选中文字后,再次点击此按钮,即可取消边框.

CSS3教程:网页文字阴影属性text

文章简介:文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). 文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). text-

CSS3网页制作实例:实现网页文字渐变内发光投影

文章简介:纯CSS3文字 渐变内发光投影效果. 前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1p

给文字加上拼音

拼音 <?php/**  拼音码表的生成:      启动输入法生成器在逆转换选项卡中装入window的拼音输入法并将其保存为文  本文件(winpy.txt)备用.    下面的代码将拼音码表文件(文本)装入到数组$pymb中,结构为:(拼音,(汉字...))  码表转换时间较长,应转换后另行保存*/$filename = "winpy.txt";$fp = fopen($filename,"r");$old = "";$ar = arr