HTML中USEMAP的用法

usemap是<img>标签的一个属性，用作指明所使用的图像地图名。
后面的#Map的Map就是用<map>标签定义的一个图像地图，它的name属性是Map,像下面这样定义：
<map name="Map">
<area shape=rect coods="100,100,200,200" href="test1.html">
<area shape=rect coods="200,100,300,200" href="test2.html">
...
</map>
使用时：
<img src="test.gif" usemap="#Map">
图像地图把一幅图像分成若干个区域，点击不同的区域会进入不同的页面。

MAP 元素 | map 对象

---

包含客户端图像映射的坐标数据。

成员表

下面的表格列出了 map 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。

标签属性/属性

SHOW:

标签属性/属性

行为

集合

事件

方法

样式

标签属性	属性	描述
	canHaveChildren	获取表明对象是否可以包含子对象的值。
	canHaveHTML	获取表明对象是否可以包含丰富的 HTML 标签的值。
CLASS	className	设置或获取对象的类。
DIR	dir	设置或获取对象的阅读顺序。
	disabled	获取表明用户是否可与该对象交互的值。
	firstChild	获取对象的 childNodes 集合的第一个子对象的引用。
ID	id	获取标识对象的字符串。
	innerHTML	设置或获取位于对象起始和结束标签内的 HTML。
	innerText	设置或获取位于对象起始和结束标签内的文本。
	isContentEditable	获取表明用户是否可编辑对象内容的值。
	isDisabled	获取表明用户是否可与该对象交互的值。
	isMultiLine	获取表明对象的内容是包含一行还是多行的值。
	isTextEdit	获取是否可使用该对象创建一个 TextRange对象。
LANG	lang	设置或获取要使用的语言。
LANGUAGE	language	设置或获取当前脚本编写用的语言。
	lastChild	获取该对象 childNodes 集合中最后一个子对象的引用。
NAME	name	设置或获取对象的名称。
	nextSibling	获取对此对象的下一个兄弟对象的引用。
	nodeName	获取特定结点类型的名称。
	nodeType	获取所需结点的类型。
	nodeValue	设置或获取结点的值。
	offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
	offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
	offsetParent	获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
	offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
	offsetWidth	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
	outerHTML	设置或获取对象及其内容的 HTML 形式。
	outerText	设置或获取对象的文本。
	ownerDocument	设置或获取结点关联的 document 对象。
	parentElement	获取对象层次中的父对象。
	parentNode	获取文档层次中的父对象。
	parentTextEdit	获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。
	previousSibling	获取对此对象的上一个兄弟对象的引用。
	readyState	获取对象的当前状态。
	scopeName	获取为该元素定义的命名空间。
	sourceIndex	获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。
STYLE		为该设置元素设置内嵌样式。
	tagName	获取对象的标签名称。
	tagUrn	设置或获取在命名空间声明中指定的统一资源名称(URN)。
TITLE	title	设置或获取对象的咨询信息(工具提示)。
	uniqueID	获取为对象自动生成的唯一标识符。

标签属性/属性

行为

行为	描述
clientCaps	提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。
download	下载文件并在下载完成后通知一个指定的回调函数。
homePage	包含关于用户主页的信息。
httpFolder	包含了允许浏览导航的文件夹视图的脚本特性。
saveFavorite	允许对象在收藏夹中留存数据。
saveHistory	允许对象在浏览器历史中留存数据。
saveSnapshot	允许对象在 Web 页保存时留存数据。
userData	允许对象在用户数据中留存数据。

集合

集合	描述
all	返回对象所包含的元素集合的引用。
areas	获取给定 map 对象所定义的 area 对象集合。
attributes	获取对象标签属性的集合。
behaviorUrns	返回标识附加到该元素行为的统一资源名称(URN)字符串的集合。
childNodes	获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合。
children	获取作为对象直接后代的 DHTML 对象的集合。

事件

事件	描述
onbeforeactivate	对象要被设置为当前元素前立即触发。
onbeforecut	当选中区从文档中删除之前在源对象触发。
onbeforepaste	在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick	在用户用鼠标左键单击对象时触发。
oncut	当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick	当用户双击对象时触发。
ondrag	当进行拖曳操作时在源对象上持续触发。
ondragend	当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter	当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave	当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover	当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart	当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop	当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocusin	当元素将要被设置为焦点之前触发。
onfocusout	在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp	当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown	当用户按下键盘按键时触发。
onkeypress	当用户按下字面键时触发。
onkeyup	当用户释放键盘按键时触发。
onlosecapture	当对象失去鼠标捕捉时触发。
onmousedown	当用户用任何鼠标按钮单击对象时触发。
onmouseenter	当用户将鼠标指针移动到对象内时触发。
onmouseleave	当用户将鼠标指针移出对象边界时触发。
onmousemove	当用户将鼠标划过对象时触发。
onmouseout	当用户将鼠标指针移出对象边界时触发。
onmouseover	当用户将鼠标指针移动到对象内时触发。
onmouseup	当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel	当鼠标滚轮按钮旋转时触发。
onpaste	当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange	当在对象上发生对象上发生属性更改时触发。
onreadystatechange	当对象状态变更时触发。
onscroll	当用户滚动对象的滚动条时触发。
onselectstart	对象将要被选中时触发。

方法

方法	描述
addBehavior	给元素附加一个行为。
appendChild	给对象追加一个子元素。
applyElement	使得元素成为其它元素的子元素或父元素。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
clearAttributes	从对象中删除全部标签属性和值。
click	触发 onclick 事件来模拟单击。
cloneNode	从文档层次中复制对对象的引用。
componentFromPoint	通过特定事件返回对象在指定坐标下的位置。
contains	检查对象中是否包含给定元素。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
dragDrop	初始化拖曳事件。
fireEvent	触发对象的指定事件。
getAdjacentText	返回邻接文本字符串。
getAttribute	获取指定标签属性的值。
getAttributeNode	获取由 attribute.name 属性引用的 attribute 对象。
getBoundingClientRect	获取指定 TextRectangle 对象集合绑定的对象。
getClientRects	获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getElementsByTagName	获取基于指定元素名称的对象集合。
hasChildNodes	返回表明对象是否有子对象的值。
insertAdjacentElement	在指定位置插入元素。
insertAdjacentHTML	在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText	在指定位置插入给定的文本。
insertBefore	在文档层次中插入元素。
mergeAttributes	复制所有读/写标签属性到指定元素。
normalize	合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
releaseCapture	释放当前文档中对象的鼠标捕捉。
removeAttribute	删除对象的给定标签属性。
removeAttributeNode	从对象中删除删除 attribute 对象。
removeBehavior	分离元素的行为。
removeChild	从元素上删除子结点。
removeNode	从文档层次中删除对象。
replaceAdjacentText	替换元素的邻接文本。
replaceChild	用新的子元素替换已有的子元素。
replaceNode	用其它元素替换对象。
scrollIntoView	将对象滚动到可见范围内，将其排列到窗口顶部或底部。
setAttribute	设置指定标签属性的值。
setAttributeNode	设置 attribute 对象为对象的一部分。
setCapture	设置属于当前文档的对象的鼠标捕捉。
swapNode	交换文档层次中两个对象的位置。

样式

样式标签属性	样式属性	描述
behavior	behavior	设置或获取 DHTML 行为的位置。

注释

所谓图像映射，就是带有预先定义区域的图像，这些区域包含了指向其它文档或锚的链接。例如，你可以在一副太阳系的图像上创建用户点击后可前往不同星球的链接。

map 对象由 IMG 元素的 USEMAP 属性引用，格式如下：

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

MAP 元素包含一组定义图像中链接区域的 AREA 元素。

此元素在 Microsoft^® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。

此元素不会被渲染。

此元素需要关闭标签。

示例

下面的例子提供了一个太阳系的图像映射代码。该代码在 MAP 元素中使用 AREA 元素及其 COORDS 值和 SHAPE 标签属性创建了由图象映射指向单个行星图像的链接。要返回到太阳系图像映射，用户可以单击后退按钮。

HideExample

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0
ALT="太阳系" USEMAP="#SystemMap">
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126"
HREF="/workshop/graphics/sun.gif">
<AREA SHAPE="circle" COORDS="90,58,3"
HREF="/workshop/graphics/merglobe.gif">
<AREA SHAPE="circle" COORDS="124,58,8"
HREF="/workshop/graphics/venglobe.gif">
<AREA SHAPE="circle" COORDS="162,58,10"
HREF="/workshop/graphics/earglobe.gif">
<AREA SHAPE="circle" COORDS="203,58,8"
HREF="/workshop/graphics/marglobe.gif">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,
281,75,288,91,267,87,253,89,237,81,229,64,228,54"
HREF="/workshop/graphics/jupglobe.gif">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,
349,74,367,105,337,85,324,85,307,77,303,60,307,50"
HREF="/workshop/graphics/satglobe.gif">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,
393,80,383,86,381,75,376,69,376,56,380,48,393,44"
HREF="/workshop/graphics/uraglobe.gif">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,
435,77,445,92,456,77,463,72,463,62,462,53,455,47"
HREF="/workshop/graphics/nepglobe.gif">
<AREA SHAPE="circle" COORDS="479,66,3"
HREF="/workshop/graphics/pluglobe.gif">
</MAP>