?? day4_2.html
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312-80">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: #CC0033; text-decoration: underline}
-->
</style>
<title>JavaScript高級教程</title>
<script language="JavaScript">
<!-- hide me
// timedAlert
// this just calls a
function timedAlert()
{
var the_timeout = setTimeout("alertAndRedirect();", 3000);
}
function alertAndRedirect()
{
alert('OK! Exhale!');
window.location.replace("day3_2.html");
}
function writeInForm(text_to_write)
{
window.document.the_form.the_text.value= text_to_write;
}
// show me -->
</script>
</head>
<body topmargin="1" leftmargin="2">
<table border="0" width="591" cellspacing="0">
<tr>
<td bgcolor="#ffff99" width="451">JavaScript高級教程 - 第四課</td>
</tr>
<tr>
<td bgcolor="#FF6600" width="451"><a href="mailto:thau@wired.com">Thau</a></td>
</tr>
</table>
<div align="left">
<table border="0" width="630" cellspacing="0">
<tr>
<td width="458" valign="top" align="left" rowspan="2"><small><small><br>
</small></small><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.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><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!');" 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><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>
<hr align="left">
<!--webbot bot="Include" U-Include="../../copyright.html" TAG="BODY" startspan -->
<p><font face="verdana, arial, geneva, sans-serif" size="2"><a href="http://phtshop.yeah.net" target="_top">本文根據
網猴 相關文章改編，版權歸原作者所有。</a> </font><font color="#000000"><span class="smallfont"></span></font></p>
<!--webbot bot="Include" endspan i-checksum="15926" --> </td>
</tr>
<tr> </tr>
</table>
</div>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -