【1】shape -- 定义热点形状
shape=rect: 矩形
shape=circle:圆形
shape=poly: 多边形
【2】coords -- 定义区域点的坐标
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<area shape=rect coords=100,50,200,75 href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<area shape=circle coords=85,155,30 href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
在制作本文介绍的效果时应注意的几点:
1、在<img>标记不要忘记设置usemap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;
2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;
3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。
实例 6-3-2.html
<html>
<head>
<title>影像地图</title>
</head>
<body>
<img src="../../imge/yxlj.jpg" alt="影像地图" hspace="10" align="left" usemap="#yxdt" border="0">
<map name="yxdt">
<area shape="rect" coords="80,69,180,120" href="" target="_blank" alt="点击链接到百度搜索">
<area shape="circle" coords="283,95,45" href="" target="_blank" alt="点击链接到新浪网站">
</map>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="#" onClick="javascript:window.history.back()">返回</a></p>
</body>
</html>
6-4 用<img>标签插入avi文件
格式:<img dynsrc="avi文件地址">
<img>标签插入avi文件的属性
属 性 描 述
dynsrc 指定avi文件所在路径
loop 设定avi文件循环次数
loopdelay 设定avi文件循环延迟
start 设定文件播放方式fileopen/mouseover(网页打开时即播放/当鼠标滑到avi文件时播放)
实例:6-4.html
<html>
<head>
<title>设定图像的边框</title>
</head>
<body>
<center>
<p align="center">
<img dynsrc="../../imge/mmm.avi" loop="-1" start="mouseover">
</p>
</center>
</body>
</html>