每位认真的网络用户，都有碰到过图像映射（Image maps）——你知道，点击那些图形的不同点，能够链接到不同的 URL。JavaScript 可让你进一步扩展image maps。在我们的例子之中，当用户点击了某位特定的人才时，我们会给有关他们的更多信息。

首先，我们简单地设置一个函数，这个函数定义了image map 每边的说明述文字：

functionleftDescription() {
//the " " character displays a line break
document.orderForm.description.value =
"This is Lefty. She enjoys figuring the tip
on restaurant bills and sorting her 14 years'
worth of computer magazines by subject.";
}
function rightDescription() {
document.orderForm.description.value =
"This is Righty. He likes making sand
castles and searching for connections
between old rock albums and classic movies.";
}

上面的代码其实并不像它看上去那么复杂。它定义了两个函数，分别是leftDescription() 和rightDescription()。当这两个函数任何一个被调用时，相应的文字就会显示在表单orderForm的description 文本域之中。

我们现在要做的是在用户点击鼠标的时候，调用JavaScript 函数取代 URL。我们通过如下方式定义image maps 来达成这一目标：

<MAP NAME="brainMap">
<AREA NAME="leftHalf" COORDS="0,0,112,112"
HREF="javascript:leftDescription();">
<AREA NAME="rightHalf" COORDS="0,0,225,225"
HREF="javascript:rightDescription();">
</MAP>

在这个例子中，当用户点击了 image map 左半部分，浏览器会调用leftDescription() 函数。相似地，当用户点击右半部分时，代码就会调用JavaScript 函数rightDescription()。

要注意的是，如果在HREF 之中调用函数，那么要调用的函数名称就必须跟在javascript:字符串之后（例如HREF="javascript:leftDescription()"）。这样可以让浏览器了解到，接着将出现JavaScript 语句。

现在，我们只需定义一些地方来放置输出文本。

<IMG NAME="currentImage"
SRC="../../Images/java.window.gif" width=225
height=125 ALIGN="TOP" USEMAP="#brainMap">
<FORM NAME="orderForm">
<TEXTAREA NAME="description" COLS=40 ROWS=4>
</TEXTAREA>
</FORM>

整个工作就完成了。我们已经使用HTML 来告诉浏览器要使用图像为java.window.gif的brainMap。我们还定义了一个称为orderForm的表单，并在其中插入一个称为description .的文本区。现在当我们点击此 image map 时，相应的函数就会被激活，并将对该人才的描述填充到文本区。