一个图象映射由一些区域组成，每个区域对应于一个相关联的超级链接，当你点击那个区域就把你带到那个链接。这里是一个简单的例子，从Patrick的图象映射教程里拿来的（稍稍有些改动）
虽然这是一个整的图象，但Patrick把它设计成图象的不同部分对应于不同的链接。在网上象这种图象映射到处都是，最常见的是用这种技术做的导航条。 如果你对此还不熟悉，请去看看Patrick的客户端图象映射教程。作为一个快速温习，上面的图象映射的HTML代码是这样的：
<IMG SRC="http://static.wired.com/html/96/39/stuff/my_image.gif" border=0 WIDTH=160 HEIGHT=140 ismap usemap="#foo"> <map name="foo"> <area name="yellow" href="http://www.mattmarg.com/" coords="20,20,70,60"> <area name="red" href="http://www.hits.org/" coords="90,20,140,60"> <area name="blue" href="http://www.hotwired.com/surf/central/" coords="20,80,70,120"> <area name="green" href="http://www.fractalcow.com/bert/bert.htm" coords="90,80,140,120"> </map>
请注意<img src>标记中有一项叫usemap="#foo".它告诉图象去找一个名字叫"foo"的map标记用到这幅图象上。map标记可以出现在页面代码的任何地方，但一般来说把它放在图象代码的旁边总是个好主意，就象你这里看到的，这样找到和修改它更容易一些。
map标记有一个开始和结束标志，中间是一系列的area标记，每个area标记用coords元素定义了一个区域并赋予其一个链接。coords元素是一个由几个数组成的字符串，每个数代表图象上某个象素的坐标。如果定义的区域是方型，则四个象素的顺序应该是：左上，右上，左下，右下。
往这种图象映射上增加JavaScript代码与往超文本链接上增加是一样容易的。实际上JavaScript几乎把area标记与超文本链接完全一样看待。所以你也可以把onClicks,onMouseOvers和onMouseOuts等这些事件加到area标记中，而其效果与你希望的完全一样。这里还是上面的那个例子，不过加了一些JavaScript语句 :
这个增加了JavaScript语句的图象映射的代码是这样的：
<map name="javascript_foo">
<area name="yellow" href="http://www.mattmarg.com/"
onMouseOver="writeInForm('All Hail Mattmarg!');" coords="20,20,70,60">
<area name="red" href="http://www.hits.org/"
onMouseOver="writeInForm('Humboldt Institute of Technological Studies');" coords="90,20,140,60">
<area name="blue" href="http://www.hotwired.com/surf/central/"
onMouseOver="writeInForm('The good, the bad, and the utterly useless');" coords="20,80,70,120">
<area name="green" href="http://www.fractalcow.com/bert/bert.htm"
onMouseOver="writeInForm('Plush antichrist revealed');" coords="90,80,140,120">
</map>它和原来的代码相当类似，唯一的差别就是在每个<area>标记中增加了一个onMouseOver事件处理，调用了一个我写的叫做writeInForm()的函数, 这个函数是这样的:
<script language="JavaScript">
<!-- hide me
function writeInForm(text_to_write)
{
window.document.the_form.the_text.value= text_to_write;
}
// show me -->
</script>太简单了是吗? 来个稍复杂点儿的，我们学学怎么用JavaScript来预装入图象。
