day4_2

JavaScript高级教程

JavaScript高级教程

JavaScript高级教程 - 第四课

第二页：图象映射与 JavaScript

一个图象映射由一些区域组成，每个区域对应于一个相关联
的超级链接，当你点击那个区域就把你带到那个链接。这里
是一个简单的例子，从 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
来预装入图象。 >>

JavaScript高级教程
第一页 JavaScript 高级教程 - 第 4 天
第二页图象映射与 JavaScript
第三页预装图象 - 是什么 ?
第四页预装图象 - 怎么做?
第五页对象的优点
第六页创建你自己的对象
第七页你的面向对象的虚拟宠物
第八页计算字符串
第九页获取难以索引的对象
第十页另一种获取难以索引的对象的手段
第十一页第四天课程复习

[ 第1课 ][ 第2课 ][ 第3课 ][第4课][ 第5课 ]