Demo 8: Creating image maps for an image, and adding popup messages
  1. Copy the file "elephants.jpg" from the class folders into a folder called demo8.
  2. Insert the image into a Dreamweaver page. Save that page as index.html within the demo8 folder.
  3. Put Demo 8 in the Title text box.
  4. Select the image. You'll see in the lower left part of the Properties pallette an area with small blue shapes. Pick one of those shapes and create a shape around the larger elephant.
  5. When you are finished, you'll notice there is a blue shape on your image. This is actually a link. Click on the shape, and in the Alternate Text box, type in "Mother Elephant".
  6. Now we will add a popup message to the mother elephant, so when a user clicks on her, they will get a message. Select the shape, and click on the "+" sign in the Behaviors pallette. Select "Popup Message"
  7. Type in "mama".
  8. Now click on the main image again. This time create an image map for the baby elephant (as in step 3). When done, click on the image map, and put some Alternate Text in, saying "Baby Elephant".
  9. Now click on the Baby Elephant's image map again, and click on the "+" sign in the Behaviors pallette. Select "Popup Message".

  10. Type in "baby".

  11. Test your page in the browser to make sure it works properly.
  12. Put a link from your index page to demo8/index.html.