<img>标签的ismap和usemap属性告诉浏览器这个图像是一个特殊的可映射,可以通过鼠标对一个饿货多个超链接进行选择,也就是通常说的图像映射(image map)
ismap属性:
图像映射的 ismap属性称为“服务器端”图像映射,它只能在<a>标签标识的超链接里面
ex:
<a href="www.baidu.images.com">
<img src="img.jpg" ismap="ismap"/>
</a>
当用户在ismap图像上点击某一处时,浏览器会自动把鼠标的x、y位置(相对于图像的左上角)发送到服务器端。特殊的服务器软件可以根据这些坐标来作出响应
usemap属性:
usemap属性提供了一种“客户端”的图像映射机制,有效地消除了服务器端对鼠标坐标的处理,以及由此带来的网络延时问题。通过特殊的<map>和<area>标签,html创作者可以提供一个描述usemap图像超链接敏感区域坐标的映射,这个映射同时包含相应的超链接url。usemap 属性的值是一个url,它指向特殊的<map>区域,用户计算机上的浏览器将把鼠标在图片上单击时的坐标转换成为特定的行为,包括加载和显示另外一个文档。
ex:
<a href="/example/map">
<img src="/i/map.jpg" ismap="ismap" usemap="#map" />
</a>
<map name="map">
<area coords="0,0,49,49" href="link1.html">
<area coords="50,0,49,49" href="link2.html">
<area coords="0,50,49,99" href="link3.html">
<area coords="50,50,99,99" href="link4.html">
</map>
以上代码将100x100 像素的图像map.jpg映射为4个区域,当用户点击其中某个区域时,将连接到不同的页面.在这个<img>标签中,已经有效地包含了对ismap图像映射的处理功能,对那些不具有usemap 处理功能的浏览器用户,可以通过另一种途径,即服务器端机制来处理图像映射
ismap和usemap的差异:
地图就是很好地应用ismap和usemap属性的例子。
usemap客户端处理图像映射的好处是,它不要求服务器或特殊的服务器软件,与ismap机制不同,它可以用在非web(无网)环境中
<map>标签:
定义了客户端图像映射。图像映射(image-map)值带可点击区域的一幅图像。
ex:
<img src="image.jpg" usemap="#mymap" />
<map name="mymap" id="map">
<area coords="0,0,49,49" alt="onearea">
<area cordds="50,0,49,49" alt="twoarea">
<area coords="0,50,49,99" alt="threearea">
</map>
<map>标签的属性:
id必需的属性 name可选属性
<area>标签
area元素永远嵌套在map元素内部,area元素可定义图像中的区域
必须属性:
alt:定义该区域的替换文本
coords:坐标值,定义可点击区域的坐标
shape:坐标区域形状(circle圆形、polygon多边形、rectangle矩形)
shape=“circle” coords="x,y,z"
shape="polygon" coords="x1,y1,x2,x2,...."
shape="rectangle" coords="x1,y1,x2,y2"
nohref:从图像映射排除某个区域