JavaScripts的一個(gè)主要應(yīng)用是其具有使你移動(dòng)鼠標(biāo)時(shí)圖片自動(dòng)切換功能。

    這里是一個(gè)快捷的基本的圖片交換例子。

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

    讓我們一步布的剖析這個(gè)例子，

    第一行是：

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

    這就象一個(gè)標(biāo)準(zhǔn)的 <img src= > 標(biāo)簽，只是它被給了一個(gè)名字：the_image， 名字是任意取的：my_image, a_box......但不許有任何空格在里面。

    下一行是：

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

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

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

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

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

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

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

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

最新評(píng)論