HTML5技术

第六章 图像的处理_HTML教程(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-24 14:16 我要评论( )

【1】shape -- 定义热点形状 shape=rect: 矩形 shape=circle:圆形 shape=poly: 多边形 【2】coords -- 定义区域点的坐标 a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标 例:area s

【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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 第六章 图像的处理_HTML教程

    第六章 图像的处理_HTML教程

    2015-09-24 14:16

网友点评