一张图片上显示多个链接的例子

最新推荐文章于 2021-06-20 15:52:41 发布

luofuIT

最新推荐文章于 2021-06-20 15:52:41 发布

阅读量1.9k

点赞数

分类专栏：超链接文章标签：超链接

超链接专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="http://www.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://www.w3school.com.cn/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="http://www.w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="http://www.w3school.com.cn/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我

们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

</html>

显示效果在： http://www.w3school.com.cn/tiy/t.asp?f=html_areamap 可查看效果