您的位置:寻梦网首页编程乐园JavaScriptJavascript入门到精通
Javascript 入门到精通

第 1 天 第 2 天 第 3 天 第 4 天 第 5 天

第 10 页: 图片掉换

作者:Thau!

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.

JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。不幸的是,微软的IE3.0不支持这种应用。用户最好立即更新到IE4.0或改用Netscape 3.0.

这里是一个快捷的错误!超级链接引用无效。例子。

Let's go through the example step by step.

让我们一步布的剖析这个例子,

The first line of interest is (第一行是:)


<img src="button_r.gif" name="the_image">

This is just like a standardexcept this one has been given a name:This name could be anything: my_image, a_box, whatever - but it can't have any spaces in it.

这就象一个标准的 <img src= > 标签,只是它被 给了一个名字: the_image。 名字是任意取的: my_image, a_box,......但不许有任何空格在里面。

The next line of interest is(下一行是):

<a href="#" onMouseOver="document.the_image.src='button_d.gif';">change</a>

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:

这是图片交换发生的地方。就象你以前见到的onMouseOver。出现在onMouseOver的引号中JavaScript主要之处是:

document.the_image.src='button_d.gif';

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?

该句是说:“找到叫'the_image'的图片并将其src 变为button_d.gif." 注意整个语句使用双引号,而 'button_d.gif' 使用单引号。尽管二者可互换,但注意如果一组引号存在于另一组引号之中,别搞混了。你可写成" 'something' " 或' "something" ' ,但不可写成:" 'something" ' or " "something" "。明白了吗?

Just as there was a lot of detail in what makes document.writeln() 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.

正如我没告诉你许多document.writeln()工作细节一样,本例我也没有告诉图片交换的工作原理。你将在下一讲关于“目标导向编程”及“文件目标模块”中详述。

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.

请注意!要交换的图片须和原图片尺寸一样!否则,它变形。

现在,该作今天的家庭作业了

第 1 页:第二天课程简介
第 2 页: 变量介绍
第 3 页: 首个变量例子的程序主体
第 4 页: 字符串的魔力
第 5 页: 变量练习
第 6 页: if-then 子句
第 7 页: if-then 语句的例子
第 8 页: if-then 练习
第 9 页: 链结事件
第 10 页: 图片交换
第 11 页: 练习 2
第 12 页: 复习

本内容由搜狐网站(www.sohoo.com.cn)提供。