Dhtml网页实例教程（10）
来源：动态WEB脚本技术论坛 发布时间：2007-10-09 13:39:00
Dhtml实例教程（十一）
今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用<img src="……" alt="……">Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变<img src="……" alt="……">Html标志中的src属性。
例15 动态改变图像
<html>
<head>
<title>DHtml举例15</title>
</head>
<body>
<p><br>
<font style="font-size:9pt" color="blue">在下边图形上移动鼠标可以改变图象</font>
</p>
<img style="cursor:hand" onmouseover="this.src=’boom2.gif’" onmouseout="this.src=’boom1.gif’" src="boom1.gif">
</body>
</html>
（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）
下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题，当您选择正确时会显示“笑脸”图像，而当您选择错误时将会显示“愁眉苦脸”图像。
例16 一道动态的选择题
Dhtml实例教程（十二）
对于Html的<div></div>标志对，您可能使用的甚少，当它在动态Html的设计中却非常有用，我们可以用它的样式属性中的position属性来定义文本显示位置的方式，包括相对位置（position:"relative"）和绝对位置（position:"absolute"），然后在用样式属性中的top、left、heigh、width属性我们先来确定文本显示的位置。很多书上把对<div></div>标志对的控制叫做对“层”的控制。下面是一个简单的举例。
例17 重叠两行文本而得到的阴影效果
<html>
<head>
<title>DHtml举例17</title>
<style>
<!--
body {font-size:9pt}
.redtext {color:red;position:absolute;top:100;left:100;}
.graytext {color:gray;position:absolute;top:101;left:102;}
-->
</style>
</head>
<body>
<p><br>
</p>
<div class="graytext"><b>您最喜欢制作主页吗？</b></div>
<div class="redtext"><b>您最喜欢制作主页吗？</b></div>
</body>
</html>
和以前的教程中介绍的其它样式单的属性相似，我们同样可以用JavaScript来对<div></div>标志对中的文本进行动态控制。下面的例子将使文本在屏幕上移动。
例18 文本在屏幕中移动
语句act = window.setInterval("Move()",50)调用了JavaScript本身具有的函数，它用于在间隔特定时间后（本例中为50毫秒）执行特定的函数（本例中为Move()函数），然后将返回值赋给一个变量（本例中为变量act），要想终止此特定函数的执行，用语句window.clearInterval(act)即可。此例是一个很不错的例子，希望您能仔细阅读，以便以后编写 * 页时能够得心应手。
0
投稿猜你喜欢
- Python爬虫可以爬取的东西有很多，Python爬虫怎么学？简单的分析下：如果你仔细观察，就不难发现，懂爬虫、学习爬虫的人越来越多，一方面
- 写了个简洁的隔行变色代码，支持三种动作变化颜色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
- 校验是否全由数字组成function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.
- 本文实例讲述了python实现简单ftp客户端的方法。分享给大家供大家参考。具体实现方法如下：#!/usr/bin/python# -*-
我们在使用Django的models查询数据库时，可以看到有这种写法：form app.models import&nb- 前言大家应该都知道，我们在mysql运维中出现过不少因为update/delete条件错误导致数据被误更新或者删除的case，为避免类似问题
- 滑动验证码介绍本篇涉及到的验证码为滑动验证码，不同于极验证，本验证码难度略低，需要的将滑块拖动到矩形区域右侧即可完成。这类验证码不常见了，官
- 文本框 textarea 限制输入文字个数的的javascript代码，我们经常在评论留言页面我们需要在客户端限制访客的留言长度，当然最好我
- 本文主要介绍如何用Python设计一个经典小游戏：猜大小。在这个游戏中，将用到前面我介绍过的所有内容：变量的使用、参数传递、函数设计、条件控
- python书写爬虫的一个框架，它也提供了多种类型爬虫的基类，scrapy用途广泛，可以用于数据挖掘、监测和自动化测试首先要先安装pytho
- 最近服务器升级到了win2008 r2，数据库也从sql2000升级到了sql2005，不过安装后发现sql server找不到服务器名这样
- 使用python实现文件导入，具体方法如下：文件样例可以自己random这里的temp1根据每一行的分隔符来读入，‘\n'表述回车t
- 1. 引言如果能够将我们的无序数据快速组织成更易读的格式，对于数据分析非常有帮助。 Python 提供了将某些表格数据类型轻松转换为格式良好
- 我在Window XP中安装了Gvim7.2，然后桌面上出现了三个快捷方式，gvim72.exe,gvim read-only,gvim e
- 前言在laravel项目开发中，经常使用到公共函数，那如何在laravel配置全局公共函数呢？？下面话不多说了，来一起看看详细的介绍吧方法如
- 目录寻找 url下载视频执行代码下载：最后的话回答来源微信 8.0 版本更新后，可以设置个人状态，状态里面可以添加火录制视频，很快状态视频就
- 策略模式策略模式是一个经典的模式，简化代码。电商领域有个功能明细可以使用“策略”模式，就是根据客户的
- 在写python程序时，对于可变对象和不可变对象这里理解不深，导致总会犯一些细节错误。以下面的程序举例：ab = {'a':
- 说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 bo
- 一、先让飞机在屏幕上飞起来吧。（一）实现飞机类class Plane: def __init__(self,fil
