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---教程五

文章来源:中国石油大学

今天我们开始使用图像了。图像在网页制作重视非常重要的一部分,如果没有图像,网页将变得很单调乏味。我们这里并不是单纯地用<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属性后边直接跟图像的文件名)

图像介绍:
        
Boom1.gif         Boom2.gif

此例的效果如下:
在下边图形上移动鼠标可以改变图象

下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题,当您选择正确时会显示“笑脸”图像,而当您选择错误时将会显示“愁眉苦脸”图像。

例16 一道动态的选择题
<html>
<head>
<title>DHtml举例16</title>
<style><!--
body {font-size:9pt}
ul {cursor:hand;color:blue;font-size:9pt}
.none {color:blue;text-decoration:none}
.underline {color:red;text-decoration:underline}
-->
</style>
<script language="JavaScript">

function ImgAppear(imgfile){
//此函数用于显示图像
if(imgfile=="good.gif")
{
Img.innerHTML=""; //清空Img对象中的所有Html
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答对了!"); //在对象Img中插入图像的Html标志
}
else
{
Img.innerHTML="";
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答错了!");}
}//function

function Start(){
//此函数用于“重新开始”的操作
Img.innerHTML="";
}//function

</script>
</head>
<body>
<p><br>
<font color="blue">98-99赛季欧洲冠军杯得主是哪支球队(请用鼠标点击选择项):</font> </p>
<table width="100%">
<tr>
<td width="233"><ul class="none">
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">多 特 蒙 德 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">尤 文 图 斯 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('good.gif')">曼 彻 斯 特 联 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">皇 家 马 德 里 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">巴 塞 罗 那 队 </li>
<li onmouseover="this.className='underline'" onmouseout="this.className='none'"
onclick="Start()"><font color="gray">重 新 开 始 </font></li>
</ul>
</td>
<td width="520" id="Img"></td>
</tr>
</table>
</body>
</html>
图像介绍:

       
good.gif          bad.gif

本例的运行结果如下:


98-99赛季欧洲冠军杯得主是哪支球队(请用鼠标点击选择项):

  • 多 特 蒙 德 队
  • 尤 文 图 斯 队
  • 曼 彻 斯 特 联 队
  • 皇 家 马 德 里 队
  • 巴 塞 罗 那 队
  • 重 新 开 始

[返回]

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

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