JavaScript 动态网页实例 —

JavaScript 动态网页实例 —— 事件处理应用

news2024/11/16 20:40:38

前言

事件处理的应用很广泛。在事件处理的应用中，鼠标事件的应用是最常用到的。本章给出几个鼠标事件处理应用的示例，包括:页面预览、图像切换、点亮文本、鼠标跟随、鼠标感应和禁用鼠标按键。在这些示例中，有的可以直接拿来应用，有的则只提供了一种应用的方法，稍加拓展，即可作出更加漂亮的应用。

8.1 页面预览

在Web页面中，可以在打开一个链接页面前对该页面进行预览。本节实例给出一种页面预览的实现方法。

要点

本节代码主要使用了onMouseOver事件和src属性，主要功能和用法如下。

当鼠标移动到页面的标签时,onMouseOver 事件会被触发。该事件可以调用相应的函数作为其事件处理函数。函数中，可以是任意合法的JavaScript代码。
scr 属性对应 HTML, 中<img>标签的 src 属性，用于表示<ig>中要显示的图像。该属性可以赋值，根据不同的值，调用并显示不同的图像。
<img>标签还有 width 和 heigth 属性，用于指出图像将以何种大小进行显示。如果不指定这两个属性的值，图像将以原始大小显示;如果仅指定其中一个属性的值，另一个属性的取值将是图像原始大小的值。

<html>
<head>
<title>超级链接页面预览</title>
</head>
<body bgcolor="#ffcc00">
<center>
<form name=form1>
<h1>超级链接页面预览</h1><hr>
<h5>将鼠标移至超链接上查看页面预览……</h5>
<table border="1" bordercolor="green" cellspacing="15" cellpadding="15">
<tr>
<td>
<a href="http://localhost/example1.htm" name=link1 onMouseOver="link1Over()">内部链接一</a><br><br>
<a href="http://localhost/example2.htm" name=link2 onMouseOver="link2Over()">内部链接二</a><br><br>
<a href="http://localhost/example3.htm" name=link3 onMouseOver="link3Over()">内部链接三</a><br><br>
<a href="http://localhost/example4.htm" name=link4 onMouseOver="link4Over()">内部链接四</a><br><br>
<a href="http://localhost/example5.htm" name=link5 onMouseOver="link5Over()">内部链接五</a>
</td>
<td>

<img name="img1" src="image1.gif" width=236 height=150>
</td>
</tr>
</table>
</form>
</center>
</body>
<script language=javascript>
<!--
function link1Over()
{
document.form1.img1.src="image1.gif"
}
function link2Over()
{
document.form1.img1.src="image2.gif"
}
function link3Over()
{
document.form1.img1.src="image3.gif"
}
function link4Over()
{
document.form1.img1.src="image4.gif"
}
function link5Over()
{
document.form1.img1.src="image5.gif"
}
//-->
</script>

</html>

分析

(1)程序首先建立了一组超级链接，每个超级链接都有各自的名称(name)，方便以后调用。并且，每个超级链接都有一个onMouseOver 事件，分别对应各自的事件处理函数。当onMouseOver事件发生时，该函数将被调用。
(2)每个事件处理函数都只有一行代码，调用document.form1.imgl.src 属性，为其赋不同的值。这样，当该函数被调用时，名为imgl的<img>标签的内容将被相应的图像替换，完
成图像替换显示。
(3)在<img name="imgl" src="imagel.gif" width=236 height-150>中，不但指定了<img的名称，还指定了其src值，用于在页面载入时显示默认的图像，同时，还指定了要显示的图像的高度和宽度。由于事件处理函数只是改变了<img>的src值,其他内容并未改变,因此,所有图像都会以指定的大小显示。
(4)本例中所选图像可以替换为相应页面的缩略图，这样，当鼠标指向该链接时，用户可首先看到该缩略图。