JavaScript初级教程(第二课)第6/7页

JavaScripts的一个主要应用是其具有使你移动鼠标时图片自动切换功能。

    这里是一个快捷的基本的图片交换例子。

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

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

    第一行是：

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

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

    下一行是：

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

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

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

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

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

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

    下面是两段代码。(注:感兴趣的话看看，这里没有讲解，可以跳过)

    <script language="JavaScript">
    <!-- hide me

    var temp = "";
    var image1 = 'netteach.gif';
    var image2 = 'phtshop1.gif';
    var image3 = 'newhome.gif'

    var user_name = prompt("What's your name", "");
    if (user_name == "") 
    {
 user_name = "stranger";
    }
    document.write(user_name);
    // end hide -->
    </script>

    <a href="#" onMouseOver="temp=image1; image1=image2; image2=image3; image3=temp; document.the_image.src=image1;" onClick="document.the_image.src=image3;"><img src="newhome.gif" tppabs="newhome.gif" name="the_image" border="0" width="145" height="47"></a>

最新评论