Go back to your web page where you created an image and placed it on the web page. Place another image in the same folder. This new image should have the same dimensions as the old one.
Double-click your old image in Netscape Composer and then hit “Advanced Edit…”. Switch to the “JavaScript Events” tab. Pull down the “Attributes” menu in the lower left and choose “onmouseover”.
For the “Value” type:
this.src="Images/Cartoon.gif"
Replace “Images/Cartoon.gif” with the path to your image.
Click “OK” and then “OK” again, and then save your web page.
JavaScript works on what are called “events”. Clicking on something is an event. Moving the mouse over something is also an event. Events get sent to “objects”, which is just (in this case) another word for an HTML tag. Our HTML tag in this case is the IMG (image) tag. Whenever someone moves the mouse over an image, that image gets an “onmouseover” event. Normally it ignores it. We’ve just told it to do something with that event: set “this.src” to “Cartoon.gif”. The “src” option is the filename of the image. If you look at the HTML Source view for your IMG tag, you’ll see that “src” is normally:
src="Photo.jpg"
Instead of Photo.jpg, it will have your original image’s filename. When we set “this.src” to “Cartoon.gif” it is like replacing “Photo.jpg” with “Cartoon.gif”.
You cannot see dynamic actions in Composer. Pull down the “File” menu and choose “Browse Page”. Your web page should look exactly as it did the last time you looked at it, and exactly as it does in the HTML Preview view of Composer. Move the mouse over the image, however, and it should immediately change to your new image.
There’s a possible problem: in order to see the old image again, you have to reload the page. Once you move the mouse over the image, it changes to the new image and does not change back when you move the mouse away.
Go back to Netscape Composer, double-click the image, click on “Advanced Edit…”, move to the “JavaScript Events” tab, and add a new event. The Attribute should be “onmouseout” and the value should be:
this.src="Images/Photo.jpg"
Replace “Images/Photo.jpg” with the path to your original image.
Okay everything, save, and browse your page. When you move the mouse over your image, it should switch to the new image, and when you move it away, it should switch back to the original.
