Vb教程 Vb.net教程 Vfp教程 C/C++教程 Vc/Vc++教程 Delphi教程 Java教程 Powerbuilder
  杀毒频道 | 短信频道 | 网络电视 | 论文中心 | 学上网 | 学软件 | 网页特效 | 电脑基础 | 论坛  
  NCRE | 软考 | CET | 职称英语 | 司法考试 | 报关员 | 公务员 | CATTI | CPA考试  
  Html教程 | Css教程 | Xml教程 | Asp教程 | Asp.net | Php教程 | Jsp教程 | Linux教程 | QQ技巧  
Photoshop Illustrator ImageReady Maya教程 3D Max教程 Lightscape Coredraw教程 Authorware Autocad教程 Freehand教程
Access教程 Mysql教程 Sql server Oracle教程 Word教程 Excel教程 Powerpoint Frontpage Asp.net源码 Php源代码
Flash教程 Fireworks Dreamweaver C#教程 outlook教程 系统安装 vbscript教程 Javascript Jsp源代码 Asp源代码
您的位置:首页 >> Html教程

自学动态HTML---教程二

文章来源:中国石油大学

现在我们开始使用JavaScript来编写动态Html,JavaScript是一种脚本语言,使用起来就象是在编写程序一样。实际上,我们只要在Html文件中加入<script language="JavaScript"></script>标志对,便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换,也能得到同样的效果。请看下边的例子。

例6 使用鼠标触发事件和动态样式表改变文本
<html>
<head>
<title>DHtml举例6</title>
<script language="JavaScript">
function change_text(){
if(document.all.Dragon.style.color=="Red"){
document.all.Dragon.style.color="Green";
}
else
{
document.all.Dragon.style.color="Red";
}
}
</script>

</head>
<body>
<br>
<h3 id="Dragon" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙!</h3>
</body>
</html>

例6中在<script language="JavaScript"></script>标志对中定义了函数change_text(),当此函数被调用时,它将对对象Dragon的style属性中的color属性进行判断,若其颜色值等于“Red”,则将其color值变为“Green”(document.all.Dragon.style.color="Green"的作用),否则将其color值变为“Red”(document.all.Dragon.style.color="Red"的作用)。而对change_text()函数的调用是在<h3></h3>标志对中进行的,id="Dragon"定义了<h3></h3>标志对的对象名为Dragon,onmouseover和onmouseout都调用了change_text()函数,因此只要onmouseover或onmouseout事件触发,都会执行change_text()函数,于是便改变了Dragon的属性,即当鼠标移动到或离开文本“我是变色龙”时,此文本的颜色将在红色(Red)和绿色(Green)之间变换。Document指代的是例6自身这个Html文档,all指代的是此Html文档的全部对象。
现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性,因为change_text()函数只能对Dragon对象进行颜色变换,若您想对一系列对象的文本(如列表中的每一行文本)进行颜色变换将会使代码增加。不用担心,我们马上解决。为了让change_text()函数更具有通用性,我把CSS样式单与JavaScript相结合,这将更加简单而且方便,请看例7。

例7 CSS样式单与JavaScript相结合改变文本
<html>
<head>
<title>DHtml举例7</title>
<style><!--
.red {color:red}
.blue {color:blue}
-->
</style>
<script language="JavaScript">
function change_text(){
if(window.event.srcElement.className=="red"){
window.event.srcElement.className="blue";
}
else
{
window.event.srcElement.className="red";
}
}
</script>

</head>
<body>
<br>
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色龙!</h3>
<h3 class="blue" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色鸟!</h3>
<h3 class="red" align="center" onmouseover="change_text()" onmouseout="change_text()">我是变色兔!</h3>

</body>
</html>

从例7中可以看到,我在CSS样式单中定义了red和blue两个样式类,然后在change_text()函数中对调用该函数的对象进行样式类的改变,从而达到颜色的变换,关键语句在于window.event.srcElement.className="样式类名",此语句能使当前调用函数的对象的className属性改变,若class="red",当调用change_text()函数时,其className="blue",它的样式类也就变成了“blue”。
也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦,不要紧,我马上来搞定这个麻烦问题。下边是一个效果不错的DHtml,请仔细阅读。

例8 对列表进行动态变换
<html>
<head>
<title>DHtml举例8</title>
<style>
body {font-family:"宋体";font-size:9pt}
.first {color:gray;text-decoration:none}
.later {cursor:hand;color:blue;text-decoration:underline}
</style>

<script language="JavaScript">
function change_text(){
if(window.event.srcElement.className=="first"){
window.event.srcElement.className="later";
}
else
{
window.event.srcElement.className="first";
}
}
document.onmouseover=change_text;
document.onmouseout=change_text;

</script>
</head>
<body>
<br>
<ul>
<li class=first > 动态Html(DHtml)
<li class=first > JavaScript
<li class=first > VBScript
<li class=first > 动态服务器页面(ASP)
<li class=first > FrontPage98
<li class=first > InternetExplorer
<li class=first > SQL Server
</ul>
</body>
</html>

本例中的特别之处在于蓝色字部分。CSS样式单首先定义了<body></body>标志对的样式(body {font-family:"宋体";font-size:9pt}),然后定义了另外两个样式类“first”和“later”,first类中的文本修饰是none,既没有修饰,而later的文本修饰是underline,及下加一条直线,并且,later类中还出现了cursor属性,其值为hand,即是网页中鼠标移到超级链结是出现的小手。除了小手外,cursor还可以取其它的值:default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。
注意到语句 document.onmouseover=change_text;document.onmouseout=change_text;只就是我们解决上边提到的问题的关键语句,它们代替了Html文档中所有的onmouseover和onmouseout事件。
您大可以自己设计出更好看、更动感的DHtml来,不怕做不到,就怕想不到。

[返回]

编程语言 web开发 数据库 网络技术 操作系统 服务器 网页设计 图形设计 办公软件 常用软件 学电脑

Copyright© www.bianceng.cn Powered by 编程入门网 All Rights Reserved.
关于本站 | 版权声明 | 联系我们 | 友情链接 |
编程入门网 版权所有