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>

    這是圖片交換發(fā)生的地方。就象你以前見到的onMouseOver。
    出現(xiàn)在onMouseOver的引號中JavaScript主要之處是：

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

    該句是說：“找到叫'the_image'的圖片并將其src 變?yōu)閎utton_d.gif." 注意整個語句使用雙引號，而'button_d.gif' 使用單引號。盡管二者可互換，但注意如果一組引號存在于另一組引號之中，別搞混了。你可寫成" 'something' "或' "something" ' ，但不可寫成：" 'something" ' 或 ""something" ".明白了嗎？

    正如我沒告訴你許多document.writeln() 工作細節(jié)一樣，本例我也沒有告訴圖片交換的工作原理。你將在下一講關于“目標導向編程”及“文件目標模塊”中詳述。

    請注意！要交換的圖片須和原圖片尺寸一樣！否則，它變形。

    下面是兩段代碼。(注:感興趣的話看看，這里沒有講解，可以跳過)

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

最新評論