我们经常会给一张图片绑定一个超链接，以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能，可以在一张图片的不同区域绑定链接，让用户可以有更新奇的体验。
-
开启图像映射
给<img>标签设置usemap属性从而开启一张图片的映射功能。
<img src = "image1.jpg" alt = "图片1" usemap = "#umap" />
这里的usemap的属性值为<map>标签的id值，下文会提到。
-
设置映射区域
图片开启了映射后，应该给图片定义若干个映射区域。我们用<map>标签来包裹这些映射区域。<map>标签的id值必须和图片的usemap属性值对应。
<map name = "umap" id = "umap">
<area shape = "rect" coords = "20,20,100,100" href = "image2.jpg" alt = "图片2" />
<area shape = "circle" coords = "200,200,10" href = "image3.jpg" alt = "图片3" />
<area shape = "poly" coords = "0,0,110,260" href = "index.html" alt = "主页" />
</map>
<area>标签必须嵌套在<map>内部，用来定义映射区域。
其中：
-
shape属性定义映射区域的形状 -
rect为矩形
-
circle为圆形
-
poly为多边形
-
coords定义了形状的坐标与半径
<map name = "umap" id = "umap">
<area shape = "rect" coords = "x1,y1,x2,y2" />
//x1,y1,x2,y2为矩形的左上角和右下角坐标。
<area shape = "circle" coords = "x1,y1,r" />
//x1,y1,r为圆心的坐标和半径。
<area shape = "poly" coords = "x1,y1,x2,y2,.....,xn,yn" />
//x1,y1,x2,y2,..,xn,yn为多边形的n个坐标点，最后一个点的坐标应该与第一个相同，若不同浏览器会自动补全。
</map>
坐标和半径都是相对于像素而言，左上角为像素的 0,0 点，你可以用图片编辑工具来确定任一点的像素坐标。
-
href映射到图片或者页面
你可以把你的映射区域映射到不同的页面或者图片。
href = "index.html"
href = "image.jpg"
另外<area>标签也可以设置target属性，用来设置在新窗口或者本窗口打开新页面。
target = "_blank"
target = "_self"
-
一个例子
<html>
<head>
</head>
<body>
<img src = "https://img.haomeiwen.com/i5099997/d59bd279ff414757.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" usemap = "#umap" alt = "猫和狗" />
<map id = "umap" name = "umap">
<area shape = "rect" coords = "220,180,420,400" href = "https://img.haomeiwen.com/i5099997/b7d90c81195aad07.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "狗" target = "_blank" />
<area shape = "circle" coords = "685,340,130" href = "https://img.haomeiwen.com/i5099997/1772a40d0046b6e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "猫" target = "_blank" />
</map>
</body>
</html>
猫和狗
点击不同的区域，会跳到不同的页面。
狗
猫
-
更多关于图像映射
你也可以在你的图像映射上添加各种事件，更多内容请参考：
W3C
作者：jingks
此为原创文章，请勿用在商业用途，转载请标明作者。
网友评论