html area图片热点

热点图片区域制作（在线制作）：http://imagemap-generator.dariodomi.de/

1、插入图片，并设置好图像的有关参数，且在<img>标记中设置参数usemap="#Map"，以表示对图像地图（Map）的引用；
2、用<map>标记设定图像地图的作用区域，并取名为：Map；
3、分别用<area>标记针对相应位置划分出多个矩形作用区域，并设定好其链接参数href。

　　　　　　class和id：是分别指定热点的类型和id号。

　　　　　　alt：用于设定热点的替代性文字。

　　　　　　href：用于设定该热点所链接的url地址。
　　　　　　shape和coords：是两个主要的参数，用于设定热点的形状和大小。其基本用法如下：
　　　　　　<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形，左上角顶点坐标为（X1,y1），右下角顶点坐标为（X2,y2）。
　　　　　　<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形，圆心坐标为（X1,y1），半径为r。
　　　　　　<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形，各顶点坐标依次为（X1,y1）、（X2,y2）、（x3,y3） ......。
　　　　　　备注：x1, y1,x2,y2　这几个点的位置是根据图片而定的，不是根据窗口的大小而定。

在制作效果时应注意的几点：
　　1、在<img>标记不要忘记设置usemap参数，且usemap的参数值必须与<map>标记中的name参数值相同，也就是说，“图像地图名称”要一致；
　　2、同一“图像地图”中的所有热点区域都要在图像地图的范围内，即所有<area>标记均要在<map>与</map>之间；
　　3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套，避免出现在shape参数设置的矩形作用区域，而在cords 中设置的却是多边形区域顶点坐标的现象出现。

area标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面，

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>

  <img src="url/to/your/image.jpg" alt="" usemap="#Map" />

　　<map name="Map" id="Map"><area alt="" title="" href="#" shape="poly" coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,82,131,159,117" /><area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" /></map>

</body>

usemap="#map" ,map为热点区域

area的三个属性：

shape：

rect(矩形)：coords的四个数值分明别表示左上角、右下角两个点横纵坐标，单位为像素。

circle(圆形)：coords的三个数值分明别表示圆心横纵坐标及半径，单位为像素。

poly(多边形)：coords的多个数值分别表示各个顶点的横纵坐标，单位为像素。

转载于:https://www.cnblogs.com/siyecao2010/p/7110516.html

html area图片热点相关推荐

html5 图片热点area，map的用法
今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...
前端：HTML/07/综合案例：月福首页，开发网站的流程，网站布局结构，排版准备，图片热点，网页多媒体
开发网站的一个流程 1,业务员与客户进行沟通,包括:风格,功能(论坛,留言板,支付,用户登录等) 2,业务员与美工沟通,制作网页效果图(首页,列表页,内容页) 3,制作人员开始切图排版,排成网页形式的 ...
3-综合案例：月福首页-多媒体-图片热点-框架
1.开发网站的一个流程业务员与客户进行沟通,包括:风格的.功能(论坛.留言板.支付.用户登录等) 业务员与美工沟通.制作网页效果图(首页.列表页.内容页) 制作人员开始切图排版,排成网页形式的后台 ...
3月20日html(二) 图片热点，网页划分，表单
1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src="../图片/5109de19b9c5b.jpg" widt ...
easyui获取图片路径_在线计算图片热点植入位置的方法与流程
本发明涉及一种在线计算图片热点植入位置的方法,属于WEB应用技术领域. 背景技术: 为丰富页面的显示内容或查看更详细的图片信息,WEB页面的图片常常会添加一些热点信息,由于图片有不确定性,图片中热点的 ...
html热点区域确定坐标,html图片热点连接区域上的坐标是如何定位的？
通过和以及三个标签一起使用,可以在html页面中插入图片,并在该图片上创建一个或多个不同形状区域的热点链接,点击热点区域可以跳转到指定的其他页面.那么, 我们今天就学习一下,如何定位图片热点区域上的坐 ...
2016/2/18 html 图片热点，网页划区，拼接，表单
①图片热点规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接在一个网络页面内,规划 ...
Dreamweaver 中图片热点连接的制作（热点工具）
一.Dreamweaver中的制作方法 DreamWeaver是MacroMedia公司出品的一个所见即所得的网页制作工具,它提供了非常强大的主页制作功能,而且使用起来非常的顺手.方便,目前正日益 ...
HTML静态网页图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...

html area图片热点

html area图片热点相关推荐

最新文章

热门文章