HTML入门：图像映射

图像地图是具有可点击区域（有时称为“热点”）的图像，通常链接到另一个页面。

如果使用得当，图像地图可以成为用户查找有关图像中表示的项目的详细信息的有效方法。他们可以单击图像的不同部分以打开与该部分相关的网页。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

要创建图像映射：文章源自你的网络首码项目网-https://www.youranweb.com/102.html

添加<>标记

使用常用方法（通过<img>元素）将图像嵌入到页面中。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

当然，图像必须首先在Web上可用。您可以上传它或引用现有图像。它可以是照片，图标，徽标，库存图像等。任何图像都很好。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

添加地图

使用HTML<地图>标记创建具有名称的地图。在此标记中，您将使用HTML<area>标记指定可单击区域的位置。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

将它们与属性链接usemap

此位将地图与图像链接起来。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

将属性添加到<img>标记。该值必须是映射的名称，前面带有哈希（）符号。usemap#文章源自你的网络首码项目网-https://www.youranweb.com/102.html

例如，如果地图有，则应在图像中使用。name="pluto"usemap="#pluto"文章源自你的网络首码项目网-https://www.youranweb.com/102.html

图像映射示例文章源自你的网络首码项目网-https://www.youranweb.com/102.html

<!-- Image -->
<img usemap="#aus-nz" src="/pix/examples/australia-nz-map.gif" width="200" height="142" 
alt="Map of Australia and New Zealand">
​
<!-- Map -->
<map name="aus-nz">
    <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" href="https://en.wikipedia.org/wiki/Australia" target="_blank" alt="Australia">
    <area shape="poly" coords="180,85,200,98,167,142,157,138" href="https://en.wikipedia.org/wiki/New_Zealand" target="_blank" alt="New Zealand">
</map>

好的，与我们之前的课程相比，此代码看起来相当复杂。但是，一旦你研究它，它就不那么复杂了。我们所做的只是添加一个图像，然后我们创建一个带有坐标的地图。最困难的部分是获得正确的坐标。文章源自你的网络首码项目网-https://www.youranweb.com/102.html

在我们的示例中，我们将 <area> 标记与 和 属性结合使用。它们接受以下属性：shapecoord文章源自你的网络首码项目网-https://www.youranweb.com/102.html

您可以使用上述属性配置自己的图像映射，其中包含任意数量的形状和可单击区域。文章源自你的网络首码项目网-https://www.youranweb.com/102.html 文章源自你的网络首码项目网-https://www.youranweb.com/102.html