首页手记 HTML图像映射

HTML图像映射

标签：

Html/CSS

我们经常会给一张图片绑定一个超链接，以供用户欣赏大图或者跳转页面。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 = "http://upload-images.jianshu.io/upload_images/5099997-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 = "http://upload-images.jianshu.io/upload_images/5099997-b7d90c81195aad07.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "狗" target = "_blank" />
          <area shape = "circle" coords = "685,340,130" href = "http://upload-images.jianshu.io/upload_images/5099997-1772a40d0046b6e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt = "猫" target = "_blank" />
        </map>
    </body></html>