📄 day4_2.html
字号:
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-teach/vb/index.htm">VB</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-teach/c/index.htm">C、C++</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-backend/database/php_mysql/index.html">PHP/MySQL</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><a href="../../1-backend/cgi_perl/perl_beginner/index.html">-Perl</a>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2">-<a href="../../1-teach/other/index.htm">其它</a> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#666699">
<div align="center"><font color="#FFFFFF">更多教程</font></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="17"><a href="../../1hdml/index.html">-HDML</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">-ping</font></a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">-模板</a></td>
</tr>
<tr bgcolor="#666699">
<td colspan="2" align="center"><font color="#FFFFFF">合作伙伴</font></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
</tr>
</tbody>
</table>
<!-- #EndLibraryItem --> </td>
<!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 -->
<td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
<!-- Search box and directories (columns 2 and 3: middle columns, combined into one) -->
<td align=center valign=top width="558">
<div align="left"><!-- #BeginEditable "1" -->
<title>JavaScrip高级教程</title>
<strong>第二页：<font size="3">图象映射与<font face="verdana, arial, geneva, sans-serif">JavaScript</font></font></strong>
<table width="452">
<tr>
<td width="448"> <font face="verdana, arial, geneva, sans-serif" size="2"></font><font size="3">一个图象映射由一些区域组成，每个区域对应于一个相关联<br>
的超级链接，当你点击那个区域就把你带到那个链接。这里<br>
是一个简单的例子，从</font><font face="verdana, arial" size="3">Patrick</font>的图象映射<a href="http://www.hotwired.com/webmonkey/html/96/40/index2a.html?tw=html" target="_blank">教程</a>里拿来的（稍<br>
稍有些改动）<font size="3">
<p><font face="verdana, arial"></font><!--webbot bot="ImageMap" rectangle="(20,20) (70,60) http://www.mattmarg.com/" rectangle="(90,20) (140,60) http://www.hits.org/" rectangle="(20,80) (70,120) http://www.hotwired.com/surf/central/" rectangle="(90,80) (140,120) http://www.fractalcow.com/bert/bert.htm" SRC="my_image.gif" border="0" ismap startspan --><map name="FrontPageMap">
<area shape="RECT" coords="20, 20, 70, 60" href="http://www.mattmarg.com/">
<area shape="RECT" coords="90, 20, 140, 60" href="http://www.hits.org/">
<area shape="RECT" coords="20, 80, 70, 120" href="http://www.hotwired.com/surf/central/">
<area shape="RECT" coords="90, 80, 140, 120" href="http://www.fractalcow.com/bert/bert.htm">
</map><a href="../../_vti_bin/shtml.exe/javascript/advance_course/day4_2.html/map"><img ismap usemap="#FrontPageMap" border="0" height="140" src="my_image.gif" width="160"></a><!--webbot bot="ImageMap" endspan i-checksum="50308" -->
</p>
</font>
<p><font size="3"> <font face="verdana, arial"></font>虽然这是一个整的图象，但<font face="verdana, arial">Patrick</font>把它设计成图象的不同部<br>
分对应于不同的链接。在网上象这种图象映射到处都是，最<br>
常见的是用这种技术做的导航条。 如果你对此还不熟悉，请<br>
去看看<font face="verdana, arial">Patrick</font></font>的客户端图象映射<a href="http://www.hotwired.com/webmonkey/html/96/40/index2a.html?tw=html" target="_blank">教程</a><font size="3">。作为一个快速温习，<br>
上面的图象映射的<font face="verdana, arial">HTML</font>代码是这样的：</font>
</td>
</tr>
</table>
<blockquote>
<pre><big>
</big><IMG SRC="http://static.wired.com/html/96/39/stuff/my_image.<br>gif" border=0 WIDTH=160 HEIGHT=140 ismap usemap="#foo">
<map name="foo">
<area name="yellow" href="http://www.mattmarg.com/" coords=<br>"20,20,70,60">
<area name="red" href="http://www.hits.org/" coords=<br>"90,20,140,60">
<area name="blue" href="http://www.hotwired.com/surf/central/"<br>coords="20,80,70,120">
<area name="green" href="http://www.fractalcow.com/bert/bert.<br>htm" <br>Scoords="90,80,140,120">
</map><big>
</big></pre>
</blockquote>
<table width="453">
<tr>
<td valign="middle" width="449"><font size="3">请注意<font face="verdana, arial"><img
src> </font>标记中有一项叫 <font face="verdana, arial"><tt>usemap="#foo"</tt>.</font>
它<br>
告诉图象去找一个名字叫<font face="verdana, arial">"foo"</font>的<font face="verdana, arial">map</font>标记用到这幅图象上。<br>
<font face="verdana, arial">map</font>标记可以出现在页面代码的任何地方，但一般来说把它<br>
放在图象代码的旁边总是个好主意，就象你这里看到的，这<br>
样找到和修改它更容易一些。
<p><font face="verdana, arial">map</font>标记有一个开始和结束标志，中间是一系列的<font face="verdana, arial">area</font><font size="3">标记，<br>
每个<font face="verdana, arial">area</font>标记用</font><font face="verdana, arial" size="4"><tt>coords</tt></font><font size="3">元素定义了一个区域并赋予其一个<br>
链接。<font face="verdana, arial">coords</font>元素是一个由几个数组成的字符串，每个数代<br>
表图象上某个象素的坐标。如果定义的区域是方型，则四个<br>
象素的顺序应该是：左上，右上，左下，右下。 </font></p>
<font size="3">
<p> <font face="verdana, arial"></font>往这种图象映射上增加<font face="verdana, arial">JavaScript</font>代码与往超文本链接上增<br>
加是一样容易的。实际上<font face="verdana, arial">JavaScript</font>几乎把<font face="verdana, arial">area</font>标记与超文<br>
本链接完全一样看待。所以你也可以把<font face="verdana, arial"><tt>onClicks</tt>,
<tt>onMouseOvers</tt></font><br>
和<font face="verdana, arial"><tt>onMouseOuts</tt></font>等这些事件加到<font face="verdana, arial">area</font>标记中，而其效果与你希<br>
望的完全一样。这里还是上面的那个例子，不过加了一些<br>
<font face="verdana, arial">JavaScript</font>语句 : </p>
<font face="verdana, arial">
<form name="the_form">
<p><!--webbot bot="ImageMap" rectangle=" (20,20) (70,60) http://www.mattmarg.com/" rectangle=" (90,20) (140,60) http://www.hits.org/" rectangle=" (20,80) (70,120) http://www.hotwired.com/surf/central/" rectangle=" (90,80) (140,120) http://www.fractalcow.com/bert/bert.htm" WIDTH="160" HEIGHT="140" SRC="http://static.wired.com/html/96/39/stuff/my_image.gif" border="0" ismap startspan --><map name="FrontPageMap1">
<area shape="RECT" coords="20, 20, 70, 60" href="http://www.mattmarg.com/">
<area shape="RECT" coords="90, 20, 140, 60" href="http://www.hits.org/">
<area shape="RECT" coords="20, 80, 70, 120" href="http://www.hotwired.com/surf/central/">
<area shape="RECT" coords="90, 80, 140, 120" href="http://www.fractalcow.com/bert/bert.htm">
</map><a href="../../_vti_bin/shtml.exe/javascript/advance_course/day4_2.html/map1"><img ismap usemap="#FrontPageMap1" border="0" height="140" src="http://static.wired.com/html/96/39/stuff/my_image.gif" width="160"></a><!--webbot bot="ImageMap" endspan i-checksum="7124" -->
<textarea rows="10" cols="20" name="the_text">
</textarea>
</p>
</form>
</font>
<p><font face="verdana, arial"></font>这个增加了<font face="verdana, arial">JavaScript</font>语句的图象映射的代码是这样的：
</font></font></td>
</tr>
</table>
<blockquote>
<pre><big>
</big><map name="javascript_foo">
<area name="yellow" href="http://www.mattmarg.com/"
onMouseOver="writeInForm('All Hail Mattmarg!');" coor<br>ds="20,20,70,60">
<area name="red" href="http://www.hits.org/"
onMouseOver="writeInForm('Humboldt Institute of Technologi<br>cal Studies');" coords="90,20,140,60">
<area name="blue" href="http://www.hotwired.com/surf/central/"
onMouseOver="writeInForm('The good, the bad, and the utter<br>ly useless');" coords="20,80,70,120">
<area name="green" href="http://www.fractalcow.com/bert/bert.<br>htm"
onMouseOver="writeInForm('Plush antichrist revealed')<br>;" coords="90,80,140,120">
</map><big>
</big></pre>
</blockquote>
<table width="468">
<tr>
<td width="464"><font size="3">它和原来的代码相当类似，唯一的差别就是在每个<font face="verdana, arial"><area></font>标记<br>
中增加了一个<font face="verdana, arial"><tt>onMouseOver</tt></font>事件处理，调用了一个我写的叫做<br>
<font face="verdana, arial"><tt>writeInForm()</tt></font>的函数, 这个函数是这样的:<font face="verdana, arial">
</font></font></td>
</tr>
</table>
<blockquote>
<pre><big>
</big><script language="JavaScript">
<!-- hide me
function writeInForm(text_to_write)
{
window.document.the_form.the_text.value= text_to_write;
}
// show me -->
</script><big>
</big></pre>
</blockquote>
<table width="458">
<tr>
<td width="454"><font size="3">太简单了是吗? 来个稍复杂点儿的，我们学学怎么用<font face="verdana, arial">JavaScript</font><br>
来预装入图象。<a href="day4_3.html"><font face="verdana, arial">>></font></a></font></td>
</tr>
</table>
<p align="left"><font face="宋体" size="3" color="#000000"><strong>JavaScript高级教程</strong></font><font color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF3300">第一页</font> <a href="day4_1.html"><font face="verdana, arial, geneva, sans-serif">JavaScript</font>高级教程<font face="verdana, arial, geneva, sans-serif">-
</font>第<font face="verdana, arial, geneva, sans-serif">4</font>天</a>
<br>
<font color="#FF3300">第二页 </font>图象映射与<font face="verdana, arial, geneva, sans-serif">JavaScript<br>
</font><font color="#FF3300">第三页 </font><a href="day4_3.html">预装图象 - 是什么<font face="verdana, arial, geneva, sans-serif">?</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第四页 </font><a href="day4_4.html">预装图象 - 怎么做?</a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第五页 </font><a href="day4_5.html">对象的优点</a><br>
<font color="#FF3300">第六页 </font><a href="day4_6.html">创建你自己的对象</a><br>
<font color="#FF3300">第七页 </font><a href="day4_7.html">你的面向对象的虚拟宠物</a><br>
<font color="#FF3300">第八页 </font><a href="day4_8.html">计算字符串</a><br>
<font color="#FF3300">第九页 </font><a href="day4_9.html">获取难以索引的对象</a><br>
<font color="#FF3300">第十页 </font><a href="day4_10.html">另一种获取难以索引的对象的手段</a><br>
<font color="#FF3300">第十一页 </font><a href="day4_11.html">第四天课程复习</a></font></p>
<p>[<a href="day1_1.html">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][第4课][<a href="day5_1.html">第5课</a>]</p>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -