使用背景

在把设置图转成页面的时候，时常会遇到这种情况：一张小图片上有好多个可以点击的小图标，按常规的处理方法是把这一个一个的小图切出来，然后每个加个a标签进行跳转，但是这样会非常的浪费时间，而且会增加页面图片的数量，拖慢页面的加载速度，所以下面我们就以这张图片为例，在上面3个小图片上加map跳转。

map-area的使用

在img标签有一个usemap的属性，值为map的id或者name，带有map的图片形式：

<img src="abc.jpg" alt="abc" usemap="#myMap">

map和area标签

　　　　 <map name="myMap" id="myMap"><br>　　<area shape="rect" coords="75, 0, 336, 148" href="http://www.baidu.com" target="_blank" alt="baidu"><area shape="rect" coords="370, 0,610, 148" href="http://www.google.com" target="_blank" alt="google"></map>

map有id和name属性，最好把id和name属性都写上，这样有更好的兼容性。
area的shape属性，为好多的值，其中最常用的是rect（矩形）和circ（圆形）
area的href属性，就是点击要跳转的目标地址
area的target和alt属性，和<a>属性一样，不多说
area的coords属性，表示矩形左上角和右下角这两点的坐标，我们就以上图为例，看下怎么算坐标

计算坐标

首先我们打开photoshop，我用的是photoshop cc，快捷键ctrl+r（mac下为command+r）打开标尺

我们可以通过红色方框的位置就是我们需要的2个点，通过标尺线我们就可以得到对应的坐标（75，0，336，148）。

能过这种方法能够精确的得到坐标，如果要想不是特别精确的取坐标，我们可以通过QQ的截图工具来取，这里不再演示了！

摘自：http://www.cnblogs.com/sunhk/p/4524395.html

转载于:https://www.cnblogs.com/yuqingfamily/p/6869566.html

HTML的map-area的使用相关推荐

map area 鼠标跟随
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
HTML图片热区map area的用法整理
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
HTML图片热区map area的用法
HTML图片热区map area的用法 <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设 ...
map+area标签
map标签是用于定义一个客户端的图像映射即带有可点击区域的一幅图像,配合area标签 area 元素永远嵌套在 map 元素内部.area 元素可定义图像映射中的区域例:要实现一幅地图上鼠标点击或者 ...
HTML图片热区map area的用法(转)
<area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: 1 & ...
java web热区链接_HTML图片热区map area的用法
标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面.其基本语法结构如下: href＝url alt＝te ...
html中map标签的用法,HTML中的map和area标签
1. 标签介绍: (1)map标签: 该标签是指图片的映射,也就是说一张可以点击的图片的映射: 属性介绍: <1> id: 中的 usemap 属性可引用中的 id 或 name 属性( ...
html area图片热点
热点图片区域制作(在线制作):http://imagemap-generator.dariodomi.de/ 1.插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap ...
【转】HTML中的map标签
html中的Map,area标签详解工具 Imagination Image Map Editor 一.定义和用法定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图 ...
Html中的map标签
图像的影像地图超链接,<map>标签浅谈在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超 ...

HTML的map-area的使用

使用背景

map-area的使用

计算坐标

HTML的map-area的使用相关推荐

最新文章

热门文章