教程五_懒之才

 首页 > 教程文档 > HTML > 教程五

教程五

 2018-05-11  609  收藏  0 赞一个  0 真差劲  0 去评论

今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用<img src="……" alt="……">Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变<img src="……" alt="……">Html标志中的src属性。

例15 动态改变图像

<html>
<head>
<title>DHtml举例15</title>
</head>
<body>
<p><br>
<fontstyle="font-size:9pt"color="blue">在下边图形上移动鼠标可以改变图象</font>
</p>
<imgstyle="cursor:hand"onmouseover="this.src='boom2.gif'"onmouseout="this.src='boom1.gif'"src="boom1.gif">
</body>
</html>

（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）

图像介绍：

QQ截图20180511173126.png

下边我们结合上一个教程中使用过的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>
<scriptlanguage="JavaScript">
function ImgAppear(imgfile){  
//此函数用于显示图像  
if(imgfile=="good.gif")  
{  
Img.innerHTML=""; //清空Img对象中的所有Html  
Img.insertAdjacentHTML("AfterBegin","<imgsrc="+imgfile+"><br>答对了!"); //在对象Img中插入图像的Html标志  
}  
else  
{  
Img.innerHTML="";  
Img.insertAdjacentHTML("AfterBegin","<imgsrc="+imgfile+"><br>答错了!");}  
}//function  
function Start(){  
//此函数用于“重新开始”的操作  
Img.innerHTML="";  
}//function  
</script>
</head>
<body>
<p><br>
<fontcolor="blue">98-99赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：</font></p>
<tablewidth="100%">
<tr>
<tdwidth="233"><ulclass="none">
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">多 特 蒙 德 队 </li>
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">尤 文 图 斯 队 </li>
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="ImgAppear('good.gif')">曼 彻 斯 特 联 队 </li>
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">皇 家 马 德 里 队 </li>
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="ImgAppear('bad.gif')">巴 塞 罗 那 队 </li>
<lionmouseover="this.className='underline'"onmouseout="this.className='none'"
onclick="Start()"><fontcolor="gray">重 新 开 始 </font></li>
</ul>
</td>
<tdwidth="520"id="Img"></td>
</tr>
</table>
</body>
</html>

图像介绍：

QQ截图20180511173203.png