HTML图像映射

我们经常会给一张图片绑定一个超链接，以供用户欣赏大图或者跳转页面。HTML有个图像映射的功能，可以在一张图片的不同区域绑定链接，让用户可以有更新奇的体验。

• 开启图像映射

给标签设置usemap属性从而开启一张图片的映射功能。

这里的usemap的属性值为标签的id值，下文会提到。

• 设置映射区域

图片开启了映射后，应该给图片定义若干个映射区域。我们用标签来包裹这些映射区域。标签的id值必须和图片的usemap属性值对应。

标签必须嵌套在内部，用来定义映射区域。

其中：

• shape属性定义映射区域的形状

• rect为矩形

• circle为圆形

• poly为多边形

• coords定义了形状的坐标与半径

坐标和半径都是相对于像素而言，左上角为像素的 0,0 点，你可以用图片编辑工具来确定任一点的像素坐标。

• href映射到图片或者页面

你可以把你的映射区域映射到不同的页面或者图片。

href = "index.html"
href = "image.jpg"

另外标签也可以设置target属性，用来设置在新窗口或者本窗口打开新页面。

target = "_blank"
target = "_self"

• 一个例子

猫和狗

点击不同的区域，会跳到不同的页面。

狗

猫

• 更多关于图像映射

你也可以在你的图像映射上添加各种事件，更多内容请参考：
W3C

作者：jingks
此为原创文章，请勿用在商业用途，转载请标明作者。