JavaScript Elementary Tutorial (Lesson 2) Page 6/7

One of the main applications of JavaScripts is that it has the function of automatically switching pictures when you move the mouse.

Here is a quick and basic picture exchange example.

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

Let's analyze this example in one step,

The first line is:

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

This is like a standard <img src= >  tag, but it is given a name: the_image, the name is arbitrarily taken: my_image, a_box... but no spaces are allowed in it.

The next line is:

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

This is where the picture exchange takes place. Just like onMouseOver you've seen before.
The main things that appear in the quotes of onMouseOver are:

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

The sentence says: "Find the image called 'the_image' and turn its src into button_d.gif." Note that the whole statement uses double quotes, while 'button_d.gif' uses single quotes. Although the two are interchangeable, be careful not to get confused if one set of quotes exists in another set of quotes. You can write it as " 'something' " or ' "something" ' , but you can't write it as: " 'something" ' or ""something" ". Do you understand?

Just as I didn't tell you many () working details, I didn't tell you about the working principle of image exchange in this example. You will explain in detail in the next lecture on "Objective-oriented Programming" and "File Target Modules".

Please note! The pictures to be exchanged must be the same as the original picture size! Otherwise, it deforms.

The following are two pieces of code. (Note: If you are interested, please read it. There is no explanation here, you can skip it)

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

    var temp = "";
    var image1 = '';
    var image2 = '';
    var image3 = ''

    var user_name = prompt("What's your name", "");
    if (user_name == "") 
    {
 user_name = "stranger";
    }
    (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="" tppabs="" name="the_image" border="0" width="145" height="47"></a>