图像映射map

weixin_34294649

于 2015-08-30 18:24:00 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Joanna-Yan/p/4771294.html

<map>标签：带有可点击区域的图像映射

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

效果图：

点击相应蓝色标签可进入详情页面浏览。

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像映射-Map</title>
</head>
<body>
    <h1>图像映射示例</h1>
    <img src="home.jpg" alt="" width="584px" height="399px" usemap="#homeMap"/>
    <map name="homeMap" id="homeMap">
        <area shape="circle" coords="160,270,20" href="coach.jpg" alt="沙发" target="_blank"/>
        <area shape="circle" coords="250,130,20" href="Painting.jpg" alt="挂画" />
        <area shape="circle" coords="160,370,20" href="carpet.jpg" alt="地毯" />
        <area shape="circle" coords="510,50,20" href="clapboard.jpg" alt="地毯" />
    </map>
</body>
</html>