web space | free hosting | Business Web Hosting | Free Website Submission | shopping cart | php hosting
Third Lesson

Document Properties (Images)


The next property we are going to learn to use is the images property. We are going to progress in our programming skills, but you will need some HTML background information.
This part requires two images. You can use any two images, but I have two below that you can use.

To copy these images right mouse click on the image and select "Save Picture As..." and save the images in the same directory as your html files.

Let's look at some basic HTML and describe what it means:

<A HREF = "lesson4.html">
<IMG SRC = "lsn4_left.jpg" NAME = "left" BORDER = 0>
</A>

Lets disect this a little.
The A HREF tag is an anchor tag and basically all it does is make everything within the anchor a link to the HTML file "lesson4.html". The only thing within the anchor is the image. This makes the image a link to the HTML file. Easy so far?

Next we want to look image tag. The SRC directs what image file should be displayed. The name of the image file in this case is lsn4_left.jpg. Next the image is given a name. That name is "left". The BORDER states how big of a border you would like around the image. The BORDER is not so important in this lesson, but I normally don't like a border around my image:)

Here's what the text above does:

Now it gets interesting.
We will use the event OnMouseOver

<A HREF = "lesson4.html" OnMouseOver = "document.images.left1.src= 'lsn4_right.jpg'">
<IMG SRC = "lsn4_left.jpg" NAME = "left1" BORDER = 0>
</A>

The text OnMouseOver = "document.images.left1.src= 'lsn4_right.jpg'" does a couple things. The OnMouseOver is the event that happens when the cursor goes over the image. When the cursor moves over the image the image named left1 will change it's source to "lsn4_right.jpg. This makes the image change from lsn4_left.jpg to lsn4_right.jpg

Here's what the text above does:

Ready for another wrinkle?
We will use the event OnMouseOut

</A>
<A HREF = "Lesson4.html" OnMouseOver = "document.images.left4.src= 'lsn4_right.jpg'" OnMouseOut = "document.images.left4.src='lsn4_left.jpg'">
<IMG SRC = "lsn4_left.jpg" NAME = "left4" Border = 0>
</A>

I know the line above might look confusing, but the only real change is the addition of OnMouseOut ="document.images.left4.src='lsn4_left.jpg'" The OnMouseOut is the event that happens when the cursor comes out of the image. When the cursor comes out of the image the image named left4 will change it's source to "lsn4_left.jpg. This makes the image change from lsn4_right.jpg (changed to this by OnMouseOver) to lsn4_left.jpg

Here's what the text above does:

This is one way to do a roll over for images, but there are better ways. Maybe I will get to have a lesson on better ways later.

JavaScript Tutorial Home
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 Lesson 12 Lesson 13 Lesson 14 Lesson 15 Lesson 16 Lesson 17 Lesson 18 Lesson 19 Lesson 20

Useful Links

Contact Webmaster