Making an image interactive using Dreamweaver MX

Making areas of the image link to different web pages.

Sometimes you want the user to click on an area of a large image, and have them taken to a different web page.

Create a page in Dreamweaver; be sure to save it.

Use Insert -> Image to add your image to the page. Select the image by clicking on it.

You will see the Properties box at the bottom. If you don't, use Window -> Properties.

Click on an area shape under Map in the Properties box (rectangular is usually best). This creates a "hotspot". In the new Properties box below, you can add a link to the webpage you want to come up when a person clicks on the hotspot.

Do this for each area and Save. Be sure to upload all the images as well as the html pages, and you're done.

Adding text to the image and making it interactive

First, create multiple images with text on it, one for each "state change".

Let's say you want the map of the world to have the name of each civilization on it. When a student moves the mouse over the name, you want that name to change to a different color. When the student's mouse moves away, the color changes back. If the student clicks on the newly colored name, a different web page comes up.

Open the map in the graphics program, and put all the default text in it (in this case, at six different spots on the map, in black text). Make a copy of this "default" map.

Change the color of one name (for example, "West Asia"). There may be different ways to do this. In a fancy program like Photoshop, you can use an "Adjustment Layer" to adjust the hue. In Fireworks, you use Filter. In simpler programs, create a file with the newly colored lettering in the same font and size, then drag it over and place it on the exact spot of the black text. I made it red, and used fancy settings like Bevel to make it look different. Since I have six text sections, I had to do this six times, with each area in a separate file.

Then, create "hotspot" areas and add "behaviors"

First, make sure all the multiple images are in the same folder. Open an html file in Dreamweaver and save it to this folder, using whatever name you choose.

Click on a hotspot shape in the lower left of the Properties box (a rectangle is best for text). Draw your hotspot around the first set of text ("Americas" is already done, and I'm working on "Europe" below).

Use Window -> Behaviors to see what actions you'll add to this hotspot. Make sure your hotspot is selected. Click the + sign to add a behavior.

Here, I'm making the image with black "Europe" change to the one with red "Europe" when the student "mouses over" the text. Choose Swap Image from the Behaviors menu. You'll get a window which lets you browse for the image you want to swap to, and two check boxes. Dreamweaver automatically assumes you want a Mouseover action, and that you want the image to change back when the user's mouse leaves it (this is "Swap Image Restore"). So you can use the default if you want that. It also assumes you want to Preload images, which loads the images that will be used at the same time as the webpage, a very good idea.

You can add as many other Behaviors as you like to the same hotspot, using the arrow to identify what causes them to happen. Your choices usually are "On Mouseover", "On Mouseout", and "On Click".

Common behaviors:
Go to URL: this will make the html page change to another one inside the same window when the user mouses
Open browser window: this lets you identify the size and attributes of a new window that will open
Show/Hide Layers: useful when you want additional layers to be hidden until the user does something, like when you want the text to change from blue to red on mouseover, then have a box appear with text or an image when the user clicks (OnClick).

Make sure that all images and html files are uploaded, then test your result in your browser (usually F12).