So, You Want A Dual Image Flip, Huh?

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 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 HTML Goodies 30-Step JavaScript Primer Series. 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 that 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 <HEAD> 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:

//Below is the code that pre-loads the graphics
{

//These are the large images
alt0 = new Image();
alt0.src = "white.gif";

alt1 = new Image();
alt1.src = "hg_banner.gif";

alt2 = new Image();
alt2.src = "jg_banner.gif";

//These are the first button graphics

graphic1= new Image();
graphic1.src = "but1.gif";
graphic1on = new Image();
graphic1on.src = "but1b.gif";

//These are the second button graphics

graphic2= new Image();
graphic2.src = "but2.gif";
graphic2on = new Image();
graphic2on.src = "but2b.gif";

//This is the function that calls for
//the change in the buttons

}
function imageChange(imageID,imageName,imageID2,imageName2) {

{
document.images[imageID].src = eval(imageName + ".src");
document.images[imageID2].src = eval(imageName2 + ".src");
}

}

</SCRIPT>

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 = "white.gif";

alt1 = new Image();
alt1.src = "hg_banner.gif";

alt2 = new Image();
alt2.src = "jg_banner.gif";

     Please note the format. The alt# = new Image(); statement denotes a new image and names it. The alt#.src = "--" 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 = "but1.gif";
graphic1on = new Image();
graphic1on.src = "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 second button left off.

The Function

I mean this:

function imageChange(imageID,imageName,imageID2,imageName2) {

{
document.images[imageID].src = eval(imageName + ".src");
document.images[imageID2].src = eval(imageName2 + ".src");
}

}

Simply put, don't touch it. It doesn't need updating. It simply acts as a go-between for the code and the images denoted above it.

The Code

You're going to need the code for the images, too. It's below. This will be placed in the <BODY> section of your page right where you want the images to appear.
Please Note... I have the images inside a table format in order to get that nice block form you see above. If you don't want that, just cut away the table commands after you get it.

We'll start by looking at one of the image flip buttons. They are both the same so there's no need to show both. This is the first one above:

Here's What's Happening:

<A HREF="http://www.htmlgoodies.com"
No surprises here. It's the beginning of a basic hypertext link. Here's where you put in the URL of the page you want this to point toward.
onMouseOver="imageChange('global','alt1','one','graphic1on')"
Here's where it all happens. This onMouseOver Event Handler is calling on the function up in the JavaScript. See the name "imageChange" up in the script? Inside the parentheses is the number of items that are to be affected. There are four. The big image (global), the new big image (alt0), the image identifier (one), and the new onMouseOver image (graphic1on).
Remember that all of these names were called for in the top portion of the script. Look again, you'll see these names.
onMouseOut="imageChange('global','alt0','one','graphic1')">
This is what is to happen when the mouse pulls off of the image. Notice the four items to be changed are now the images that were originally there to begin with. Thus, when the mouse moves off, everything goes back to normal. Get it?
<IMG SRC="but1.gif" BORDER="0" NAME="one">
Here's a basic image command set up to be an active image that people can click on. Notice the BORDER="0" command to lose the blue border.
The only real new item is the NAME="one" image identifier that's used to link this image with the onMouseOver and onMouseOut Event Handlers.
</A> ends the whole thing.

Now, without going back over the entire second image link listed above, take a look for yourself and see that all the parts are the same except that all the image names have been updated so that this button is made up of new images.
Also Notice... that the NAME="--" image identifier has been upgraded to "two". If you add images to this, you'll need to follow this format again and again, and continue to add one to the name and to the onMouseOver and onMouseOut Event Handlers so that each new link is one up from the last. And remember, if you upgrade it in the IMG command, you also must update it in the Event Handlers.

I told you this was a little rough....

The Large Image

The code looks like this:

This one's not so tough. It's a simple IMG command, but notice inside there's that wonderful NAME="global" command. Remember that from each of the onMouse(Over and Out) Event Handlers above? That's what attaches this image to those other images. It's also what denotes to the browser that here's where the new global image (denoted by alt#) is to be placed.

And That's That...

Okay, you have all the parts. You can look at each image and then look through the JavaScript and see where it goes. You can then try to change out the images I gave you with new images. Then you can try to add a few new image flips that affect the larger global image.
Keep playing with it. You'll get it to work and really impress your friends. Then they'll write to me asking how you got that effect. But this time I'll be prepared with a tutorial....

[The Parts] [The Script]
[The Code]