| 第 1 课 | 第 2 课 | 第 3 课 | 第 4 课 | 第 5 课 |
JavaScript高级教程 - 第四课
作者： Thau
第二页：图象映射与JavaScript|
一个图象映射由一些区域组成，每个区域对应于一个相关联 的超级链接，当你点击那个区域就把你带到那个链接。这里 是一个简单的例子，从Patrick的图象映射教程里拿来的（稍 稍有些改动）
虽然这是一个整的图象，但Patrick把它设计成图象的不同部 |
<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.baidu.com/" coords="20,20,70,60"> <area name="red" href="http://www.google.com/" coords="90,20,140,60"> <area name="blue" href="http://www.sina.com/" coords="20,80,70,120"> <area name="green" href="http://www.sohu.com/" coords="90,80,140,120"> </map>
| 请注意<img
src> 标记中有一项叫 usemap="#foo".
它 告诉图象去找一个名字叫"foo"的map标记用到这幅图象上。 map标记可以出现在页面代码的任何地方，但一般来说把它 放在图象代码的旁边总是个好主意，就象你这里看到的，这 样找到和修改它更容易一些。 map标记有一个开始和结束标志，中间是一系列的area标记，
往这种图象映射上增加JavaScript代码与往超文本链接上增 这个增加了JavaScript语句的图象映射的代码是这样的： |
<map name="javascript_foo">
<area name="yellow" href="http:///www.baidu.com/"
onMouseOver="writeInForm('All Hail Mattmarg!');" coords="20,20,70,60">
<area name="red" href="http://www.google.com/"
onMouseOver="writeInForm('Humboldt Institute of Technological Studies');" coords="90,20,140,60">
<area name="blue" href="http://www.sina.com/"
onMouseOver="writeInForm('The good, the bad, and the utterly useless');" coords="20,80,70,120">
<area name="green" href="http://www.sohu.com/"
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 来预装入图象。>> |
JavaScript高级教程
第一页 JavaScript高级教程- 第4天
第二页 图象映射与JavaScript
第三页 预装图象 -
是什么?
第四页 预装图象 -
怎么做?
第五页 对象的优点
第六页 创建你自己的对象
第七页 你的面向对象的虚拟宠物
第八页 计算字符串
第九页 获取难以索引的对象
第十页 另一种获取难以索引的对象的手段
第十一页 第四天课程复习
来源： Wired Digital Inc.