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

来源：互联网发布：高频交易程序员招聘编辑：程序博客网时间：2024/05/29 17:38

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

0 0