Demo 8: Creating image
maps for an image, and adding popup messages
- Copy the file "elephants.jpg"
from the class folders into a folder called demo8.
- Insert the image into a
Dreamweaver page. Save that page as index.html within
the demo8 folder.
- Put Demo 8 in the Title
text box.
- 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.
- 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".
- 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"
- Type in "mama".
- 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".
- Now click on the Baby Elephant's
image map again, and click on the "+" sign in the Behaviors
pallette. Select "Popup Message".
- Type in "baby".
- Test your page in the browser
to make sure it works properly.
- Put a link from your index
page to demo8/index.html.
|