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


