So You Want An Imagemap Image Flip, Huh?

By Joe Burns

...use these to jump around or read it all
[Preload The Images] [The Images] [Main Image]
[The Function] [The Map]

     This is a great effect. Let me tell you what it does first and then you can try it out for yourself. The image below is of an 1864 painting by Francis B. Carpenter entitled "The First Reading of the Emancipation Proclamation Before the Cabinet". I've always liked it and it lends itself to this tutorial. The picture is an image map. But wait...there's more.

     When you place your pointer over top of Lincoln's face, you will immediately get an enlarged version of the left side of the image. Ditto the guy with the beard, a member of the cabinet, sitting to Lincoln's left. Try it. The map will just flip for you. Once flipped, let your pointer sit for a minute. A tool tip will pop up.

     OK! Now that's pretty smooth. I've only set the map to do two flips in order to keep the text small enough so you can understand it quickly. But I think you can already see the benefits of this. I could have set a flip for each of the faces. A new image could have come up telling who the person was and a little background about him. The entire scene could have been explained just by moving the mouse around. Cool.

No Flipping Sections!

     Some of you may have rolled into this tutorial thinking I was going to show how to flip only one section of the image map. For instance, you roll over Lincoln's head and it becomes Garfield. (The president...not the cat.) That effect can be achieved by building a Fake Map out of image flips. Then just that one section flips and Lincoln becomes Garfield. This tutorial flips the entire image.


Preload The Images

     Since we're dealing with images that need to come up in a heartbeat, it's best to preload all the ones you'll need. I did that through a JavaScript that looks like this:

<SCRIPT LANGUAGE="javascript">

Image1 = new Image(265,406)
Image1.src = "ep.gif"

Image2 = new Image(265,406)
Image2.src = "ep2.gif"

Image3 = new Image(265,406)
Image3.src = "ep3.gif"

</SCRIPT>

     I won't go into much more detail than this because I've got an entire tutorial on just preloading. Read it if this is new to you and roll on back when you're through.


The Images

     I wanted to point something out. Don't think that I'm doing some wonderful trick that makes the browser blow up the section of the image. This is a basic image flip created using three images that I put together. Each image is 409X265. I made the images that "blow up" a section of the greater image using a graphics editor. In fact, here are the three images used in the effect:

ep.gif   ep2.gif   ep3.gif

     As with most image flips, all three images are the same size on purpose.


Main Image

     The code that places the main image on the page also links the image space to both the image map coordinates and the JavaScript functions that will make the flip. It looks like this:

<IMG NAME="emp" SRC="ep.gif" USEMAP="#ep">

  • NAME="emp" names the space the image sits in. This will be used in the JavaScript functions to link this space to hierarchy statements so that when an image is used to replace the space, the JavaScript will know where to put it.

  • SRC="ep.gif" is the Source for the image.

  • USEMAP="#ep" tells the browser that this is an image map and that it will find the coordinates for the map down below in a map called "ep". If this is new to you, maybe a quick read of the Client Side Image Map tutorial is in order.


The Function

     There are three images involved here. Thus, you will need three functions. The first will flip to the one image, the second will flip to the other image, and the third will flip back to the first. It looks like this:

<SCRIPT LANGUAGE="javascript">

function zoomin() {
document.emp.src = Image3.src; return true;
}

function zoomout() {
document.emp.src = Image2.src; return true;
}

function original() {
document.emp.src = Image1.src; return true;
}

</SCRIPT>


     As I just said, there are three named zoomin(), zoomout(), and original().

      The meat of the script, the part that does the trick, is between the curly brackets. That hierarchy statement breaks down like this:

  • document denotes that this effect will occur on this document.
  • emp is the name of the image space from above, this is where the image will display...the space occupied by the original image.
  • src is the source.
  • Image3.src comes from the preload statements and represents the third image.
  • return true allows the image to remain flipped as long as the pointer sits tight.

     The order the functions appear in really doesn't make any difference except for the original(). That one must be linked to the original image. Past that, it's much easier to alter the onMouseOver statements in the map to change what image appears than to redo all the function statements. So just make sure you have a function named for each of the images you preloaded. As long as each function is a different name, you're OK.


The Map

     It looks like this:

<MAP NAME="ep">

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="117,70,160,119" HREF="ep2.gif" onMouseOver="zoomout()" onMouseOut="original()">

<AREA SHAPE="rect" ALT="Enlarged right side" COORDS="212,68,250,120" HREF="ep3.gif" onMouseOver="zoomin()" onMouseOut="original()">

<AREA SHAPE="default" nohref>

</MAP>

     There are three sections to this map. The first is the active site of Lincoln's head, the next is the active site over the bearded man's head, and the third is any other part of the map. Note the three lines of code for each above. Again, if this is new, maybe a trip to the Client Side Image Tutorial is in order.

     I am most interested in the onMouseOver and onMouseOut commands. See how the two lines of code above that denote coordinates have them? The onMouseOver should be pointing at the function that will display the correct new image. The onMouseOut should always be pointed at the function that displays the original image.

      Like I said before, it's easier to change the function names around here than to rewrite all of the functions themselves.

The Tool Tip Box

     If you haven't caught it by now, the yellow Tool Tip box is created by the "ALT=" attribute in the AREA tag.


That's That...

     You can set up as many image flips as you can set aside parts of the image. Just make sure each section has its own function assigned to it. I think this is a great effect. Elarged right side Enlarged right side

 

Enjoy!

 

[Preload The Images] [The Images] [Main Image]
[The Function] [The Map]

 

Back to the Goodies Home Page


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •