自学动态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(imgpold=="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赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：
- 多 特 蒙 德 队
- 尤 文 图 斯 队
- 曼 彻 斯 特 联 队
- 皇 家 马 德 里 队
- 巴 塞 罗 那 队
- 重 新 开 始
| |
[返回] | 
