|
|
|
|
|
|
The folowing example demonstrates how you can change an image dynamically after the page has finished loading. I use the following two images to do the pseudo-animation.
fanoff.gif |
fan.gif |
When you click on the "On" button, 'fan.gif' is displayed. When you click "Off", 'fanoff.gif' is displayed. Note that I am only changing the images. The animation happens because 'fan.gif' is an animated GIF.
Take a look at the JavaScript code needed to accomplish this:
In the <IMG> tag, the NAME="coolfan" part is added so that we can refer to this image as coolfan from JavaScript. In the onClick handler of the buttons, we can change the src property of the image to whatever we want. This will cause the browser to featch the new image image and display it in place of the old one.
Image Rollovers
You might have seen a number of web pages where an image transforms when you move the mouse over it. This can also be done using the above technique. Try moving your mouse over the image below. Clicking on it will take you to my index.html page.
|
|
Now, take a look at the code required for creating a link like the above one.
I will be putting up some advanced stuff for manipulating images as soon as I learn them myself. Until then, try experimenting on your own.
