img标签usemap属性

来源：互联网发布：淘宝被投诉假冒商品编辑：程序博客网时间：2024/04/29 05:27

html的img标签：定义一个图像在网页中引入。它还有个usemap属性很有意思。

看看51ditu首页中有一个地图，中部有个中国地图。点击右键下载下来看下就是一个普通的图片。

但点击地图上的省份却可以出发不同的事件（或打开不同的链接），很有意思。原来是使用了usemap属性。

当然还要定义一个map标签。整份代码如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>img usemap属性</title></head><body><img src="http://www.51ditu.com/maps/img/chinamap.gif?n%A3%BDm" mce_src="http://www.51ditu.com/maps/img/chinamap.gif?n%A3%BDm" usemap="#Map" border="1"/><map name="Map" class="maparea"><area shape="rect" mce_shape="rect" coords="73,87,103,104" mce_coords="73,87,103,104" href="javascript:alert('新疆')" mce_href="javascript:alert('新疆')"><area shape="rect" mce_shape="rect" coords="144,125,173,142" mce_coords="144,125,173,142" href="javascript:alert('青海')" mce_href="javascript:alert('青海')"><area shape="rect" mce_shape="rect" coords="84,158,115,175" mce_coords="84,158,115,175" href="javascript:alert('西藏')" mce_href="javascript:alert('西藏')"><area shape="rect" mce_shape="rect" coords="220,90,257,105" mce_coords="220,90,257,105" href="javascript:alert('内蒙古')" mce_href="javascript:alert('内蒙古')"><area shape="rect" mce_shape="rect" coords="348,45,389,61" mce_coords="348,45,389,61" href="javascript:alert('黑龙江')" mce_href="javascript:alert('黑龙江')"><area shape="rect" mce_shape="rect" coords="346,68,371,83" mce_coords="346,68,371,83" href="javascript:alert('吉林')" mce_href="javascript:alert('吉林')"><area shape="rect" mce_shape="rect" coords="323,84,351,100" mce_coords="323,84,351,100" href="javascript:alert('辽宁')" mce_href="javascript:alert('辽宁')"><area shape="rect" mce_shape="rect" coords="298,100,326,114" mce_coords="298,100,326,114" href="javascript:alert('天津')" mce_href="javascript:alert('天津')"><area shape="rect" mce_shape="rect" coords="288,120,314,136" mce_coords="288,120,314,136" href="javascript:alert('山东')" mce_href="javascript:alert('山东')"><area shape="rect" mce_shape="rect" coords="268,107,295,121" mce_coords="268,107,295,121" href="javascript:alert('河北')" mce_href="javascript:alert('河北')"><area shape="rect" mce_shape="rect" coords="207,116,235,130" mce_coords="207,116,235,130" href="javascript:alert('宁夏')" mce_href="javascript:alert('宁夏')"><area shape="rect" mce_shape="rect" coords="186,162,214,179" mce_coords="186,162,214,179" href="javascript:alert('四川')" mce_href="javascript:alert('四川')"><area shape="rect" mce_shape="rect" coords="256,142,281,157" mce_coords="256,142,281,157" href="javascript:alert('河南')" mce_href="javascript:alert('河南')"><area shape="rect" mce_shape="rect" coords="305,144,332,159" mce_coords="305,144,332,159" href="javascript:alert('江苏')" mce_href="javascript:alert('江苏')"><area shape="rect" mce_shape="rect" coords="320,162,342,177" mce_coords="320,162,342,177" href="javascript:alert('上海')" mce_href="javascript:alert('上海')"><area shape="rect" mce_shape="rect" coords="216,168,243,185" mce_coords="216,168,243,185" href="javascript:alert('重庆')" mce_href="javascript:alert('重庆')"><area shape="rect" mce_shape="rect" coords="250,162,277,177" mce_coords="250,162,277,177" href="javascript:alert('湖北')" mce_href="javascript:alert('湖北')"><area shape="rect" mce_shape="rect" coords="283,161,308,177" mce_coords="283,161,308,177" href="javascript:alert('安徽')" mce_href="javascript:alert('安徽')"><area shape="rect" mce_shape="rect" coords="213,196,239,209" mce_coords="213,196,239,209" href="javascript:alert('贵州')" mce_href="javascript:alert('贵州')"><area shape="rect" mce_shape="rect" coords="243,183,269,198" mce_coords="243,183,269,198" href="javascript:alert('湖南')" mce_href="javascript:alert('湖南')"><area shape="rect" mce_shape="rect" coords="273,185,299,200" mce_coords="273,185,299,200" href="javascript:alert('江西')" mce_href="javascript:alert('江西')"><area shape="rect" mce_shape="rect" coords="308,177,334,193" mce_coords="308,177,334,193" href="javascript:alert('浙江')" mce_href="javascript:alert('浙江')"><area shape="rect" mce_shape="rect" coords="179,210,204,225" mce_coords="179,210,204,225" href="javascript:alert('云南')" mce_href="javascript:alert('云南')"><area shape="rect" mce_shape="rect" coords="227,214,252,228" mce_coords="227,214,252,228" href="javascript:alert('广西')" mce_href="javascript:alert('广西')"><area shape="rect" mce_shape="rect" coords="231,248,257,263" mce_coords="231,248,257,263" href="javascript:alert('海南')" mce_href="javascript:alert('海南')"><area shape="rect" mce_shape="rect" coords="292,200,319,214" mce_coords="292,200,319,214" href="javascript:alert('福建')" mce_href="javascript:alert('福建')"><area shape="rect" mce_shape="rect" coords="259,219,287,231" mce_coords="259,219,287,231" href="javascript:alert('广东')" mce_href="javascript:alert('广东')"><area shape="rect" mce_shape="rect" coords="244,231,270,246" mce_coords="244,231,270,246" href="javascript:alert('澳门')" mce_href="javascript:alert('澳门')"><area shape="rect" mce_shape="rect" coords="276,232,304,248" mce_coords="276,232,304,248" href="javascript:alert('香港')" mce_href="javascript:alert('香港')"><area shape="rect" mce_shape="rect" coords="311,228,338,243" mce_coords="311,228,338,243" href="javascript:alert('台湾')" mce_href="javascript:alert('台湾')"><area shape="rect" mce_shape="rect" coords="272,90,302,107" mce_coords="272,90,302,107" href="javascript:alert('北京')" mce_href="javascript:alert('北京')"><area shape="rect" mce_shape="rect" coords="196,130,222,145" mce_coords="196,130,222,145" href="javascript:alert('甘肃')" mce_href="javascript:alert('甘肃')"><area shape="rect" mce_shape="rect" coords="246,116,272,130" mce_coords="246,116,272,130" href="javascript:alert('山西')" mce_href="javascript:alert('山西')"><area shape="rect" mce_shape="rect" coords="224,136,252,151" mce_coords="224,136,252,151" href="javascript:alert('陕西')" mce_href="javascript:alert('陕西')"></map></body></html>

map标签里的area标签的几个属性意义见：http://www.w3school.com.cn/tags/tag_area.asp

这里还是记下area的shape属性，可选项有矩形，圆形和多边形。尤其要注意的是coords属性，得结合shape使用，图像左上角的坐标是 "0,0"。