MENU
Backgrounds
Tools
Tutorials
What Is
About
 


CopyScape

Dreamweaver Image Maps

   
Other Categories In Dreamweaver
Anchors
Flash Rollover
Links
S S I
Behaviors
Form Tips
Photo Album
Site Live
C S S Rollovers
Image Maps
Play Sound
Templates
C S S Styles
Jump Menus
Pop-up Windows
Define Site
Layers
Quick Tips

Dreamweaver MX Image Maps Tutorials

Image maps are basically images with designated hotspots. These hotspots have links which will take you to the indicated address on a click of a mouse.

Image maps are usually used for placing various links on a single dissected image. Using shapes (circles, squares or polygon) spatial separation on top of the image is achieved. Thus, one shape means one link; this is true for the rest of the surface area of the shape.  Let us take for example the obvious. Say you have an image of a map. It is a single image, right? But using image maps, you can click different points pertaining to a certain country with a link that may possibly trigger to load another page containing facts about the country.

Here’s how to create one in Dreamweaver MX.

1.      First, insert an image to your page by clicking Insert from menu bar and choose Image under it.

2.      Then, click on the image and open the Properties panel.

3.      At the bottom left of the panel, you will find the word Map together with a text box and 3 blue buttons below it.

4.      Now, name your image map using the text box.

5.      Then click on any of the 3 blue icons. These icons are hotspots drawing tools and they have different shapes, Rectangular, Oval and Polygon. Hotspots are links and what sets them apart from other links are their location co-ordinates on the image.

6.      Draw and place where you want the hotspots to be. Upon clicking the hotspot areas, they will take you to a particular page. Fill out the details for the links.

7.      After drawing the hotspots, click the black arrow and go back to the arrow cursor.

Note: In order to make your image map user friendly you can put a rollover effect so that it can alert the user of different responses to his interaction with the image and give him an idea that certain parts of the image are linked to other pages or other locations. You can also use other software to edit the brightness of the image. The highlighted portions will surely catch your site visitors’ attention.  


Original Authors: Roz
Edit Update Authors: M.A.Harris
Updated On:
27/04/2009


Program Software Development © Globel Limited UK LOGON