您的位置：首页 > 其它

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

2015-01-06 11:21 351 查看
<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"> <!---map是图形控制的标识-->

<!-- 以第一个area为例子：area是每个图形区域
shape : 图像样式 coords: 大小位置 例如：（x,y)=(180,139),r=14 -->

<!-- target:在哪里显示新网页 alt: 提示

href:区域链接 -->

<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 可查看效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航