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

下面是一段示例代码,以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属性实现图像映射暂时总结到此!!

你可能感兴趣的:(html/css学习零星笔记(二)——使用usemap属性创建图片映射)