provided by: 
Originally published at Internet.com Use these to jump around or read it all...
[The Parts] [The Script]
[The Code]
I can usually tell where my readers are surfing. The reason is that often I'll get a letter asking how another site did something spectacular. The latest thing everyone wants is a dual image flip ( So, You Want An Image Flip, Huh? (Part 2) ) like the one put up on Comedy Central. It isn't there anymore, so don't bother looking. They had it set up so when your cursor moved over a link on the left of the page, the image in the television screen changed. It was a great example of page construction.
Luckily, about the same time I was getting requests, a young man who calls himself Snaglepuss submitted the following script. Problem solved. Here is just the effect you're looking for. Roll your pointer over the two buttons on the left and watch the bigger image on the right.
Now that is cool! I'll state right here that you do not have to have all the images right up close to each other like I do above. That's only for demonstration's sake. They can be on opposite ends of the Web page, it doesn't matter.
-----------------------------------
The Parts
Okay, there's no doubt about it, this is a rough JavaScript. It's involved and if you intend to alter it in any way, you're going to have to be very careful. That said, I'd like to invite you to learn more about JavaScript in the The JavaScript Primers . You'll do better with scripts like this one if you have a more in-depth knowledge of the language.
Because it's always easier to simply copy and paste from me, I've put together an HTML page you can download tthat contains just the working script and nothing else. It might be easiest to use this to follow along. Here are the parts you'll need:
Here are all the parts in a big Zip file.
-----------------------------------
The Script
This event comes in two parts: The script that sits in between the page's commands, then the code that goes in the body commands to display the images. We'll work with the script first. I have tried to add comment statements in the script below to help you see the parts and what they do. (The statements are in bold and italic and start with double slashes: //.) You can copy and paste it from here if you didn't download it above. The comment statements are not in the downloads above, just below, but don't be concerned about them if you copy and paste the script from here. They shouldn't affect the script's functions:
-----------------------------------
-----------------------------------
The Large Images
Let's take it in order, shall we? Here's the code that appears first. It denotes the large images:
alt0 = new Image();
alt0.src="http://www.developer.com/white.gif";
alt1 = new Image();
alt1.src="http://www.developer.com/hg_banner.gif";
alt2 = new Image();
alt2.src="http://www.developer.com/jg_banner.gif";
Please note the format. The alt# = new Image(); statement denotes a new image and names it. The alt#.src="http://www.developer.com/-" that immediately follows, denotes the source of the image.
The order follows: The image that appears on the page when nothing is happening, the image that appears when the first button is passed over, and finally the image that appears when the second button is passed over.
If you add images and buttons, just continue to follow the pattern, adding right under where the statement above left off.
The Buttons
Here's the code for the first button above. The second also follows this pattern so there's only the need to show this one.
graphic1= new Image();
graphic1.src="http://www.developer.com/but1.gif";
graphic1on = new Image();
graphic1on.src="http://www.developer.com/but1b.gif";
The pattern should look a little more normal by now. The new image statement is used to pre-load the image, then the statement immediately following offers the source for the image. Two images are required to make the image flip, thus two images are called for. See that above? One is named but1.gif and the other is named but1b.gif.
Again, the other image flip button follows the same format. If you do add any buttons to this, be sure to continue the same pattern, continuing where the
Author: Joe Burns
Read article at Internet.com site