📄 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 + -