对图片的某一块区域进行超链接，如何实现？
发布网友
发布时间：2022-04-22 14:45
共1个回答
热心网友
时间：2023-05-18 23:48
在同一张图片上指定的地方设置超链接，又成为图片热点链接、图像映射。
主要通过HTML标签
<img> 定义图像。
<map> 定义图像地图。
<area> 定义图像地图中的可点击区域。
来实现。
关键技术是通过img 标签的ismap 、usemap属性，配合map、area标签实现。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
例子：
<img src="http://w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="http://w3school.com.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="http://w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="http://w3school.com.cn/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
