Image Maps
Image maps are simply pictures that have mapped regions acting as links when the mouse clicks onto them. Here is a picture of Mount Rushmore. This picture is a perfect example of how an image map can make a web site more interesting to use. You can easily set this picture to visit new pages about each president just by clicking on the face of a president!
The first step is to find your picture. You can scan a picture, take a picture with a digital camera or find an image on the web. Once you have your picture just insert onto your web page. You will have to figure out where you want your mapped regions to be on your image. For the Mount Rushmore picture we are going to make each face go to a page about that president.
So the next step would be to either create or find a web site about Washington, Jefferson, Roosevelt, and Lincoln. Using a search engine makes this step easy.
* George Washington - http://www.ipl.org/div/potus/gwashington.html
* Thomas Jefferson - http://www.ipl.org/div/potus/tjefferson.html
* Theodore Roosevelt - http://www.ipl.org/div/potus/troosevelt.html
* Abraham Lincoln - http://www.ipl.org/div/potus/alincoln.html
Image Map Tools
When you click to select an image, the properties box at the bottom of Dreamweaver changes. You are able to view the dimensions of the picture, the source of the picture, and create an image map. To view the image map tools in the properties box you may have to extend the properties box by clicking on the down arrow found in the bottom right hand corner (see image below)
By clicking on the down arrow, you will extend the properties box and will be able to view and use the image map tools found in the bottom left corner of the extended properties box (see image below)
Once you have found the image, the web pages you want to link to, and the image map tools, you are ready to create your image map.
Creating The Image Map
The image on the right shows the image map toolbar which holds the 3 hotspot tools. The 3 hotspot tools are named the rectangular hotspot tool, the oval hotspot tool, and the polygonal hotspot tool.
The white box is used to type in the name of your image map. Pick a name that is one word and all lowercase letters. If you forget to name your map, Dreamweaver will name it map1 for you. Your second map would be named map2, etc. The black arrow is your selection arrow. If you need to delete a hotspot you must use the black arrow key to select the hotspot and then hit delete on your keyboard.
Rectangular Hotspot
To use the rectangular hotspot, click once on your inserted picture to select it. Click on the rectangular hotspot tool and drag out a square or rectangle around the area of the picture you would like to serve as your hotspot. In the example to the left, a square was dragged across the face of George Washington. Once the hotspot is in place you can use the black arrow tool to resize, move, or delete the hotspot. If you wish to keep the hotspot, the last step would be to type in your link into the box provided by Dreamweaver.
Oval Hotspot
To use the oval hotspot, click once on your inserted picture to select it. Click on the oval hotspot tool and drag out a circle around the area of the picture you would like to serve as your hotspot. In the example to the left, a circle was dragged across the face of Thomas Jefferson. Once the hotspot is in place you can use the black arrow tool to resize, move, or delete the hotspot. If you wish to keep the hotspot, the last step would be to type in your link into the box provided by Dreamweaver.
Polygonal Hotspot
To use the polygonal hotspot, click once on your inserted picture to select it. Click on the polygonal hotspot tool and use the left mouse button to create hotspot points by clicking around the area of the picture you would like to serve as your hotspot. In the example to the left, a polygonal shape was created around the faces of Theodore Roosevelt and Abraham Lincoln. Once the hotspot is in place you can use the black arrow tool to resize, move, or delete the hotspot. If you wish to keep the hotspot, the last step would be to type in your link into the box provided by Dreamweaver.
Polygonal hotspot note: Every so often, the polygonal hotspot tool will not work as expected. This is often due to using text wrapping or other formatting options with your image. If you ever have a problem using the polygonal hotspot tool, try taking away any text wrapping, complete the needed hotspot work, and then redo the text wrapping to overcome the problem.
Finally, save your page and use the preview option to test out your image map.
Image Map Review
1 - find or create an image to use for your image map.
2 - insert your image onto your web page and select it.
3 - use the hotspot tools to create mapped regions (hotspots)
4 - once you create a mapped region, enter the URL for the link
5 - save and test your image map by using the preview option in Dreamweaver!
Your instructor will show you an example of each hotspot tool during class.
Help video
Free Images