html/css学习零星笔记（二）——使用usemap属性创建图片映射

最新推荐文章于 2021-09-30 01:33:40 发布

唐小狼

最新推荐文章于 2021-09-30 01:33:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： php

本文链接：https://blog.youkuaiyun.com/tangxiaolang101/article/details/49468999

php 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用HTML的usemap属性和<area>标签创建图片映射，通过示例代码展示了如何定义不同形状的可点击区域，并连接到不同的URL。重点在于理解coords属性根据shape属性的值来确定区域的具体位置和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是一段示例代码，以w3school给出的示例为基础，代码如下：

<html>
<body>
<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>

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

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

</map>

</body>
</html>

这样的设计就可以让eg_planets.jpg图片产生三个可以超链接的区域，分别链接到不同的地址上。

需要注意的是<area>标签中，coords属性。coords属性的数据取决于前面shape属性的值。

例如本例中，shape属性的值是circle（圆形），coords属性的值180和139就是圆形的位置，14就是园的半径。

shape属性的值是rect（矩形），coords属性的值就是两组坐标点，分别对应两个矩形对角的坐标。

关于<img>标签使用usemap属性实现图像映射暂时总结到此！！