AbleDesign - Tutorials

Web Design Tutorials - Intermediate Design Considerations

Image Maps & Image Flips

Image Maps and Image Flips (also known as Rollovers or Mouseovers) allow you to give site visitors some graphical interactivity. They can greatly improve the visual appeal of a page by adding functional navigation or merely fun effects. Both items are pretty much what the names imply.

  • Image Maps are a single image, with sections mapped out to point to different URLs. A good example would be regional sales with a picture of a map carved up into the available regions/markets. The mapping is performed by the browser, so the visitor merely points to the section of the image they are interested in. Furthermore, the mapping is independent from the actual image file, so there is no increase in the image's file size.
  • Image Flips can be any number of images, but almost always consist of two or more. They take a very wide variety of forms. One use might be a series of buttons like at the top left of this page (the navigation globes) that change when you hover the mouse over them -- the image "flips." Sometimes you want a product image to appear when you point to the corresponding name. This, too, can easily be accomplished with Image Flips.

Below is an example of the same image used as both an Image Map and an Image Flip. To see the difference, hover your mouse over Mickey's (no pun intended, ouch) eyes. You will notice that the left and right eyes in each picture point to the same respective links.



Image Map

Image Flip

How It Works

Image Maps will always take pretty much the same form, code-wise. While simple shapes (the rectangular eyes, roughly) can be mapped out by hand fairly easily, a graphics program designed for the purpose is recommended.

Image Flips, on the other hand, can take almost any form. They are most often accomplished through JavaScript.

What the Code Looks Like

The Mickey Mouse Image Map was produced by the following code:

<map name="Map1">
<area href="http://abledesign.com/tutorials/" shape="rect" coords="84, 59, 112, 101">
<area href="http://abledesign.com/" shape="rect" coords="118, 60, 143, 101">
</map>
<img src="http://abledesign.com/images/tutorials/mickey_mouse_2.gif" width="227" height="204" border="0" usemap="#Map1">

The first line merely opens and names the Map and can be called whatever you like, so long as it is unique to that page. Next comes however many mapped out regions you have. This example uses 2 (the left and right eye), so there are 2 lines with coordinates and target links. The next line closes the Map, and the final line contains the actual image along with a reference to the Map name. That last point is very important, otherwise the browser does not know what Map the image is tied to. The first 4 lines of the example (from the open to the close of the Map) can actually be placed anywhere on the page; they do not need to directly precede or follow the image tag.

More complicated is the code for the Mickey Mouse Image Flip:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--

if (parseInt(navigator.userAgent.charAt(8)) >= 3) {
eye1on = new Image();
eye1on.src = "http://abledesign.com/images/tutorials/mickey_left_eye_on.gif";
eye1off = new Image();
eye1off.src = "http://abledesign.com/images/tutorials/mickey_left_eye.gif";
eye2on = new Image();
eye2on.src = "http://abledesign.com/images/tutorials/mickey_right_eye_on.gif";
eye2off = new Image();
eye2off.src = "http://abledesign.com/images/tutorials/mickey_right_eye.gif";

}

function eyeOn(imageID) {
oneye = eval(imageID + "on.src");
document [imageID].src = oneye;
}

function eyeOff(imageID) {
offeye = eval(imageID + "off.src");
document [imageID].src = offeye;
}

// -->
</SCRIPT>

</HEAD>
<BODY>

<table width="227" cellpadding="0" cellspacing="0" border="0"><tr>
<td width="100%" valign="top" colspan="4"><img src="http://abledesign.com/images/tutorials/mickey_top.gif" width="227" height="59" border="0" alt=""></td>
</tr><tr>
<td width="85" valign="top"><img src="http://abledesign.com/images/tutorials/mickey_left.gif" width="85" height="42" border="0"alt=""></td>
<td width="31" valign="top"><a href="http://abledesign.com/tutorials/" OnMouseOver="eyeOn('eye1')" OnMouseOut="eyeOff('eye1')"><img src="http://abledesign.com/images/tutorials/mickey_left_eye.gif" width="31" height="42" border="0" name="eye1" alt=""></a></td>
<td width="29" valign="top"><a href="http://abledesign.com/" OnMouseOver="eyeOn('eye2')" OnMouseOut="eyeOff('eye2')"><img src="http://abledesign.com/images/tutorials/mickey_right_eye.gif" width="29" height="42" border="0" name="eye2" alt=""></a></td>
<td width="82" valign="top"><img src="http://abledesign.com/images/tutorials/mickey_right.gif" width="82" height="42" border="0" alt=""></td>
</tr><tr>
<td width="103" valign="top" colspan="4"><img src="http://abledesign.com/images/tutorials/mickey_bottom.gif" width="227" height="103" border="0" alt=""></td>
</tr></table>

Without getting too deep into the mechanics of the JavaScript, the basic process is to:

  1. Choose the JavaScript code that best suits your needs (there are dozens of choices; search some of the resources listed on the Interactivity page).
  2. Define the images that will be used in the code that gets placed in the <HEAD> section of the HTML page.
  3. Prepare the image(s) that will be used for the Image Flip -- if it is a single image with many parts like Mickey, then you will need to carefully slice it and reassemble it via tables (there are automated tools for this; use at your own risk)
  4. Name each image that will be flipped so that the browser knows what images to assign to the "on" and "off" states, as specified in the second step.

More Examples (opens in a new window)

Image Maps:

Image Flips:

As you can see, the only real limitation to the possible uses of Image Maps and Image Flips is the extent of your imagination!

Next Tutorial
Back to the Tutorials Index



Home | Services | Pricing | Portfolio | About Us | Contact
Support | Programs | Purchase | Tutorials | Site Map

© 1999-2024 AbleDesign.com - Web Design that Can!