使用图像映射
图像映射(image map)是一种定义了可点击区域(即“热点”)的图像,这些区域可以链接到不同的目标。要创建图像映射,你需要定义每个热点的坐标及其链接的 URL。以下是一个图像映射的示例:
<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />
<map name="worldmap">
<area
shape="rect"
coords="0,0,100,100"
href="https://www.northamerica.com"
alt="North America"
/>
<area
shape="rect"
coords="100,0,200,100"
href="https://www.southamerica.com"
alt="South America"
/>
<area
shape="rect"
coords="200,0,300,100"
href="https://www.europa.com"
alt="Europe"
/>
<area
shape="rect"
coords="300,0,400,100"
href="https://www.asia.com"
alt="Asia"
/>
<area
shape="rect"
coords="400,0,500,100"
href="https://www.africa.com"
alt="Africa"
/>
</map>
在这段代码中,usemap
属性指定了映射的名称,该映射通过 <map>
标签定义。每个 <area>
标签通过指定其形状(例如 "rect" 表示矩形)、坐标及其链接的 URL 来定义一个热点。