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