Advanced Textual Enhancement: Image-Mapping

The procedures below are all performed using Macropedia Dreamweaver®, which is available in [ labs?]. "Image-mapping" creates areas in an image ("hotspots") that are made into active links connected with other images or with text. The image below has three such hotspots (one indicated by the position of the cursor), each connected to a portion of the text that was written to discuss it.

Mapped image


Preparing the Text for Layers

Use any word-processing program to produce the annotations that will be displayed interactively with the image:

Using WordPad to create text

Each paragraph will be placed in a separate "layer," the screen equivalent of a sheet of transparency film. The layers are drawn by selecting the "insert layers" command, which draws a small square into which the text can be inserted (copy/paste). The text layers can be repositioned next to the appropriate "hotspot."
 
 
 
Drawing a layer Pasting text into layers
Drawing a Layer
Pasting text into layers

Selecting the layer command opens a toolbar that permits positioning and creating named links. The layers should be named, in the "link" box, preferably with the same names used for the hotspots. 

Naming layers in "Link" box
Layers Toolbar

To work with layers, open the Layers window; notice the cursor in the image below. Since interactive images usually display text only when the cursor encounters or clicks on the hotspots, text layers can be hidden, and only the image displayed. Visibility is controlled by the Layers window. The "open eye" symbol below indicates that both layers, defined by the boxes, are currently visible.

Setting the visibility of each layer



Clicking on the "eye" symbol cycles through the controls of the visibility of the layers. The "closed eye" indicates that layer two (indicated by the cross-cursor) will not be displayed:

Layer "open" and "closed" symbols

If the links have been named, the names will appear in the box.

Mapping the Image: Creating "Hotspots"

In the image below, the cursor indicates the tools used to create the shapes of the image areas:
 
 

Defining "hotspots"



The topmost hotspot has been named "eyes," as will its target, Layer 1, and has two actions ("Behaviors") connected to it: (1) to display the text when the cursor is moved over the area, and (2) to hide the text when the cursor moves out of the defined area. First, the behaviors menu is opened from the menu "Windows" commands:

Selecting "Behaviors" window

The behaviors window will remain on the screen until closed.

Next, click on a hotspot to select it; now, the "behaviors" commands can be attached. Clicking on the "+" sign in the behaviors window displays a selection of actions. From the "Commands" menu, select "Layers: Show/Hide." In the image below, the behavior "show layer--eyes" has been linked to the upper hotspot when the cursor moves over the hotspot (highlight "on MouseOver"). In the next image, the layer is hidden on "MouseOut."

Image "show"/"MouseOver" behaviors


Image hide "MouseOut" behavior



View the completed image in action.