Rollovers  and Image Maps Giulio Porta, all rights reserved.

For this assignment your job will be that of creating an interactive image. The interactivity will be created by a number of rollovers. Rollovers are, in essence, a two or more cell animation activated by a mouse action. Most likely you have encounter rollovers in some web pages, they are usually applied to buttons, as you place the pointer over the button it changes color giving you the illusion that there is lighting up, or it's turned on. In reality nothing is turning on, there is no light behind it, you are simply rolling over to another image of the same size and shape, but with a much brighter color. In our case we are going to take this idea into a much larger scale.

What is triggering a rollover is a series of instructions (a Java script), you don't have to write this script, programs like Image Ready will do that for you. Some simple types of rollovers can be done with html editors, like Front Page, or Dreamweaver, but Image Ready will allow you to take this idea further.

The interactive illustration here below has not been fully developed in its details, it is still in its conceptual stage, but it's fully functional. It can be used to introduce a presentation on human anatomy or head and neck surgery. You can use the example here below as a guideline, but you'll be expected to come up with your own idea and create create your own design.

The numbers from 1 to 4 are intended to initiate the interactive process, as you place the cursor over the numbers 1, 2, 3, and 4 you will activate (rollover to) the images paired up with the numbers. These images are intended to appear inside the head which is referred to as the "main" image, but your design may call for something different, and the rollover images may appear outside the main image.

The numbers from 1 to 4 can be replaced with words, or buttons, without numbers words or buttons it is doubtful that anyone will try to interact with that image.

1.brain  2.skeletal system  3. mouth cavity  4. ocular cavity

Creating the "Main Image" and the Rollovers.

The "Main Image" as well as the subsequent rollover images from 1 to 4, were created in Photoshop by copying and pasting the same image on separate layers. Each image from 1 to 4 was modified according to the image needs, in other words to allow the main image to flip to the others: 1.brain  2.skeletal system  3. mouth cavity  4. ocular cavity.

Creating rollovers with Image Ready v 8

The Rectangle Image Map Tool will allow you to allocate areas dedicate to this interactive process. Once the cursor enter the area that has been designated to trigger the rollover, another selected image will appear. These selections in Image Ready go by the name of Image Maps.



Rectangle Image Map Tool, on its right there is another tool that will allow you move and scale the image map.

Creating Image Maps.

With the Rectangle Map Tool drag around the area you want to use to activate the rollover.

Drag around all the areas that you want to define as interactive.

You can use any of the given tools designed to make this  the Rectangle, Circle, or Polygon, it all depends on the shape of the area that you want to "fence in" and dedicate to this type of interactivity.


Add Rollover State

To do so you'll need two windows panels:

  1. Layers
  2. Web content, for that panel go to the top menu to Windows > Web content and select it.

Now you are ready to create you rollovers:

Under Web Content > Image Maps you should see the "Main Image" as Normal and below thumb nails of all the Image Maps as you have define them with the Rectangle Map Tool.

To create a rollover R + click  on the the thumbnail representing the area you want interact with and in the pop up menu select Add Rollover State.

Next: Select the desire rollover state by name from the Layer window, as you can see here on your right.

Repeat the operation, as I described to you here above, for all the Image Maps.

When you are finished pairing up Image Maps with their respective rollovers, go the the top menu to Image > Image Size, change its size according to its use, in other words according to where is going to go in your presentation or in a web page layout design.


When you'll save your work, aside from saving your html document, a new folder named Images will be created, inside this folder all the images that you have created in Photoshop as well as all the image maps that you have made in Image Ready will be store. The two must stay side by side, don't place the html inside the folder, or change in any manner the relationship between the folder and the html document. If you do the rollover will not work.
You don't insert this interactive graphic into your presentation as an image because it is not, you will have to open it as a File.

In Front Page, or any other html editor, you must go to File > Open. Once this file is open you can center it, add a table for a heading, and at the bottom a table for links.