Lesson 5 - Creating a Client Side Image Map

Dreamweaver makes is super easy for you to create client side image maps.

An image map is an image that has MORE THAN ONE area defined by coordinates based on invisible shapes drawn over the coordinates. These invisible shapes are known as hotspots and are areas that are hyperlinked. These invisible shapes are linked to specific html pages. When the user rolls the cursor over the invisible shapes the cursor turns into a hand indicating to the user that the shape is a hot spot which links to another file or named anchor on the same page. To do this project, you'll need one image with a few definable areas.

Please note that an image that has only one hot spot is NOT an effective use of an image map. You need to have MORE THAN ONE CLEARLY DEFINED area in order to create an effective image map. The different areas need to be obvious to the user. The usability of your Image Map factors into my evaluation of your homework.

Creating an Image Map

Roll your mouse over each of the squares in the image above; whenever the mouse arrow turns into a hand, you are over a hotspot and can click on the image to visit a new page. To create your own image map, just follow the steps below.

1. Click the cursor at the place in your html file where you want to create your image map.
2. Insert the graphic that you will convert into the image map. Select an image that has OBVIOUS areas which can become hotspots to different web pages. These areas should be obvious to the user. This should not be a game to try to find the hidden hotspot. The hotspots should have meaning to the user. For instance in the image above, I have the logos for some older versions of Macromedia products. It might have even been more effective if I put the product name in text below or on the icon. From top left to top right and then bottom left to bottom right, I have fireworks, dw, shockwave, authorware, flash and macromedia home.
3. Select the image and expand the Properties Inspector's bottom pane if it's not already open. Fill in the fields these fields:
   
   
   • Image Name
   • Map Name
   • Alt Text

   I've named my image mm_products. I named the Map, mmedia. The alt text is "some adobe products". I added a border of 1 and will center the image on the page by selecting Center from the Align dropdown menu.

4. Select one of the 3 Hotspot Tools. The choices are: Rectangular, Oval, and Polygon. You will use these to draw invisible shapes over the areas you want to define. The shapes will appear to be a cool blue color as indicated in the PI, but just like in Flash - these invisible 'buttons' will not appear in the web browser. They are merely identifying the coordinates by which the browser will interpret the area of the hotspot.
   
   

   

   With your selected hotspot tool, click hold and drag to define an area of the image. To create a perfect square or circle, hold down the Shift key while using the Rectangular or Oval Hotspot Tool.

   

   Here I have created a rectangular hotspot around the word and logo for macromedia. The Properties Inspector has changed to display only those properties specific to the hotspot. I entered the URL for Adobe in the Link field and put some Alt text. If I want to adjust or edit the hotspot, I can use the Pointer Hotspot Tool.

   

5. Select the Polygon Hotspot Tool to define an irregularly shaped hotspot. To create the shape, click once wherever you want to add an angled corner. Add the links and Alt text.

Editing Hotspots

Select a hotspot and use the Pointer Hotspot Tool to resize or reshape by clicking and dragging on the handles. You can move the selected hotspot to a new location by dragging or by using the keyboard arrow keys which move one pixel at a time. Hold down the Shift key and you can move 10 pixels at a time.

The image below shows the hotspots. I included it so you can see the shapes of the hotspot for each of the individual links. In I.E. a ghost of the linked area remains on the browser so you could see the outline when viewing in that browser.

Test your image map in both browsers.

You can also access the Image Map tools from the Insert Panel's Common Objects by clicking on the Image Dropdown Menu and selecting the tool you want to use to define the hot shape.

Questions about the Image Map

1. Can I link it to other web sites?
   
2. I'm not sure how obvious it should be, or how obvious mine is.
   
3. Is it correct if I put a few images together and make them into one jpg or gif file, then use it as an image map?

• Each hotspot can be linked to places within your web site using the anchor tag, OR external web sites using an absolute URL such as http://www.google.com target="_blank".
  
• VERY OBVIOUS....each hit state or hot spot should be obvious to the user. If you put a few images of animals together for example...the cat could go to http://www.catusers.com and the dog could go to a named anchor within your site such as animal.html#dog and the mouse could go to http://www.computer_products.com or rodents.com, etc.
  
• Yes, you can combine image using an image editing program and save as .gif or .jpg. If the images are mainly text and broad areas of color, save as a .gif. If the images are photographic or blended transformations of color, use .jpg.

* click the link below to continue with this lesson *
Dreamweaver Navigation Bar

Copyright © 2009 - 2010 Robert D. Cormia - November 1, 2009