?? tutorial2_page10.html
字號:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0">
<title>Webmonkey: javascript: Thau's JavaScript Tutorial: Day 1</title>
<meta NAME="keywords"
CONTENT="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder,">
<meta NAME="description"
CONTENT="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta NAME="Template" CONTENT="E:\LIZEJUN\OFFICE\html.dot">
</head>
<body TEXT="#000000" LINK="#0000ff" VLINK="#800080" BGCOLOR="#ffffff">
<table CELLSPACING="0" BORDER="0" CELLPADDING="3" WIDTH="612">
<tr>
<td WIDTH="60%" VALIGN="MIDDLE"><b><font FACE="System,??" LANG="ZH-CN" COLOR="#ff0000">第</font><font
FACE="宋體" LANG="ZH-CN" COLOR="#ff0000">10</font><font FACE="System,??" LANG="ZH-CN"
COLOR="#ff0000">頁</font><font FACE="宋體" LANG="ZH-CN" COLOR="#ff0000">: </font><font
FACE="System,??" LANG="ZH-CN" COLOR="#ff0000">圖片掉換</font><font COLOR="#ff0000"> </font></b><font
FACE="System,??" LANG="ZH-CN"><br>
<!-- BYLINE --> </font><font FACE="System,??" LANG="ZH-CN" SIZE="2">作者：</font><a
HREF="mailto:thau@wired.com"><font FACE="宋體" LANG="ZH-CN" SIZE="2">Thau!</font></a><font
FACE="宋體" LANG="ZH-CN"> <!-- SEE ALSO LINKS --></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><TBODY><font FACE="Verdana, arial" SIZE="2">One
of the most commonly used features of JavaScript is the ability to change images on a
mouseover. Unfortunately, Microsoft Internet Explorer 3.0 does not support image
replacement. So if you're using IE 3.0, it might be time to upgrade to IE 4.0 or switch to
Netscape.</font><font FACE="System,??" LANG="ZH-CN"> </font><font FACE="Verdana, arial"
SIZE="2"><p>JavaScripts</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">的一個主要應用是其具有使你移動<br>
鼠標時圖片自動切換功能。不幸的是，微軟的</font><font
FACE="Verdana, arial" SIZE="2">IE3.0<br>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">不支持這種應用。用戶最好立即更新到</font><font
FACE="Verdana, arial" SIZE="2">IE4.0</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">或改用<br>
</font><font FACE="Verdana, arial" SIZE="2">Netscape 3.0.</p>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2"><p>這里是一個快捷的</font><a
HREF="#"><font FACE="System,??" LANG="ZH-CN"><b>錯誤！超級鏈接引用無效。</b></font></a><font
FACE="System,??" LANG="ZH-CN" SIZE="2">例子。</p>
</font><font FACE="Verdana, arial" SIZE="2"><p>Let's go through the example step by step.</p>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2"><p>讓我們一步布的剖析這個例子，</p>
</font><font FACE="Verdana, arial" SIZE="2"><p>The first line of interest is <br>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">第一行是：</TBODY></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,??" LANG="ZH-CN"><pre>
</font><font
FACE="Verdana, arial"><img src="button_r.gif" name="the_image"></font></pre>
</td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><TBODY><font FACE="Verdana, arial" SIZE="2">This
is just like a standardexcept this one has been given a name:This name could be anything: </font><tt>my_image</tt><font
FACE="Verdana, arial" SIZE="2">, </font><tt>a_box</tt><font FACE="Verdana, arial" SIZE="2">,
whatever - but it can't have any spaces in it. </font><font FACE="System,??" LANG="ZH-CN"
SIZE="2"><p>這就象一個標準的</font><font SIZE="2"> </font><tt><img src= ></tt><font
FACE="Verdana, arial" SIZE="2"> </font><font FACE="System,??" LANG="ZH-CN" SIZE="2">標簽，只是它被<br>
給了一個名字：</font><font SIZE="2"> </font><tt>the_image</tt><font
FACE="Verdana, arial" SIZE="2">. </font><font FACE="System,??" LANG="ZH-CN" SIZE="2">名字是任意取的：<br>
</font><tt>my_image</tt><font FACE="Verdana, arial" SIZE="2">, </font><tt>a_box</tt><font
FACE="Verdana, arial" SIZE="2">,</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">。。。。但不許有任何空格<br>
在里面。</p>
</font><font FACE="Verdana, arial" SIZE="2"><p>The next line of interest is </p>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2"><p>下一行是：</TBODY></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,??" LANG="ZH-CN"><pre>
</font><font
FACE="Verdana, arial"><a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a></font></pre>
</td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><TBODY><font FACE="Verdana, arial" SIZE="2">This
is where the image swap happens. It's just like the ou saw before. The active piece of
JavaScript, which appears in the quotes of the is this: </font><font FACE="System,??"
LANG="ZH-CN" SIZE="2"><p>這是圖片交換發生的地方。就象你以前見到的<br>
</font><tt>onMouseOver</tt><font FACE="Verdana, arial" SIZE="2"> </font><font
FACE="System,??" LANG="ZH-CN" SIZE="2">。出現在</font><tt>onMouseOver</tt><font
FACE="System,??" LANG="ZH-CN" SIZE="2">的引號中<br>
</font><font FACE="Verdana, arial" SIZE="2">JavaScript</font><font FACE="System,??"
LANG="ZH-CN" SIZE="2">主要之處是：</TBODY></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,??" LANG="ZH-CN"><pre>
</font><font
FACE="Verdana, arial">document.the_image.src='button_d.gif';</font></pre>
</td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="MIDDLE" BGCOLOR="#ffffff"><TBODY><font FACE="Verdana, arial" SIZE="2">This
statement says, "find the image called and change its to Note that there are double
quotes around the whole statement, and takes single quotes. Although quotes are
interchangable, if you have one set of quotes inside another set of quotes, the sets have
to be of different kinds. So you could either do but not Got it? </font><font
FACE="System,??" LANG="ZH-CN" SIZE="2"><p>該句是說：“找到叫</font><font
FACE="Verdana, arial" SIZE="2">'</font><tt>the_image</tt><font FACE="Verdana, arial"
SIZE="2">'</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">的圖片并將其</font><tt>src</tt><font
FACE="Verdana, arial" SIZE="2"> </font><font FACE="System,??" LANG="ZH-CN" SIZE="2">變為<br>
</font><tt>button_d.gif</tt><font FACE="Verdana, arial" SIZE="2">." </font><font
FACE="System,??" LANG="ZH-CN" SIZE="2">注意整個語句使用雙引號，而<br>
</font><font FACE="Verdana, arial" SIZE="2">'button_d.gif' </font><font FACE="System,??"
LANG="ZH-CN" SIZE="2">使用單引號。盡管二者可互換，但注意<br>
如果一組引號存在于另一組引號之中，別搞混了。你<br>
可寫成</font><font FACE="Verdana, arial" SIZE="2">" 'something' " </font><font
FACE="System,??" LANG="ZH-CN" SIZE="2">或</font><font SIZE="2"> </font><font
FACE="Verdana, arial" SIZE="2">' "something" ' </font><font FACE="System,??"
LANG="ZH-CN" SIZE="2">，但不可<br>
寫成：</font><font FACE="Verdana, arial" SIZE="2">" 'something" ' or "
"something" ".</font><font FACE="System,??" LANG="ZH-CN" SIZE="2">明白了嗎？</p>
</font><font FACE="Verdana, arial" SIZE="2"><p>Just as there was a lot of detail in what
makes </font><tt>document.writeln()</tt><font FACE="Verdana, arial" SIZE="2"> work, I'm
not telling you exactly how this image swap is working. You'll learn the details of both
when we look at object-oriented programming and the Document Object Model in the next
lesson. </p>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2"><p>正如我沒告訴你許多</font><tt>document.writeln()</tt><font
FACE="Verdana, arial" SIZE="2"> </font><font FACE="System,??" LANG="ZH-CN" SIZE="2">工作細節一樣，<br>
本例我也沒有告訴圖片交換的工作原理。你將在下一講<br>
關于“目標導向編程”及“文件目標模塊”中詳述。</p>
</font><font FACE="Verdana, arial" SIZE="2"><p>An important caveat about image swapping is
that the image you're switching to should be the same size as the original. If it's not,
it'll get smashed or stretched to fit the original's size. </p>
</font><font FACE="System,??" LANG="ZH-CN" SIZE="2"><p>請注意！要交換的圖片須和原圖片尺寸一樣！否則，它<br>
變形。</p>
<p>現在，該作今天的</font><font SIZE="2"> </font><font FACE="System,??"
LANG="ZH-CN">家庭作業了</TBODY></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="TOP" BGCOLOR="#ffffff"><font FACE="System,??" LANG="ZH-CN">第</font><font
FACE="宋體" LANG="ZH-CN">1</font><font FACE="System,??" LANG="ZH-CN">頁：<a
HREF="tutorial2.html">第二天課程簡介</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">2</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page2.html">變量介紹</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">3</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">:</font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page3.html">首個變量例子的程序主體</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">4</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page4.html">字符串的魔力</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">5</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page5.html">變量練習</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">6</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: <a HREF="tutorial2_page6.html">if-then </font><font
FACE="System,??" LANG="ZH-CN">子句</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">7</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: <a HREF="tutorial2_page7.html">if-then </font><font
FACE="System,??" LANG="ZH-CN">語句的例子</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">8</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: <a HREF="tutorial2_page8.html">if-then </font><font
FACE="System,??" LANG="ZH-CN">練習</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">9</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page9.html">鏈結事件</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">10</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><font FACE="System,??" LANG="ZH-CN"><a
HREF="tutorial2_page10.html">圖片交換</a><br>
第</font><font FACE="宋體" LANG="ZH-CN">11</font><font FACE="System,??" LANG="ZH-CN">頁</font><font
FACE="宋體" LANG="ZH-CN">: </font><a HREF="tutorial2_page11.html"><font FACE="System,??"
LANG="ZH-CN">練習</font><font FACE="宋體" LANG="ZH-CN"> 2</a><br>
</font><font FACE="System,??" LANG="ZH-CN">第</font><font FACE="宋體" LANG="ZH-CN">12</font><font
FACE="System,??" LANG="ZH-CN">頁</font><font FACE="宋體" LANG="ZH-CN">: </font><font
FACE="System,??" LANG="ZH-CN"><a HREF="tutorial2_page12.html">復習</a></font></td>
</tr>
<tr>
<td WIDTH="60%" VALIGN="MIDDLE"><font FACE="System,??" LANG="ZH-CN"></font></td>
</tr>
</table>
<font FACE="System,??" LANG="ZH-CN">
<p> </p>
</font>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -