Create Image maps using Macromedia Dreamweaver

Tool(s) Required:

HTML Editor: Dreamweaver 4 or above
Recommended: Adobe Dreamweaver CS3

An image map is basically used for placing multiple links on a single image. For example you have a medical site, where a photo of the human body should have links to different pages when different parts of the body are clicked.

For this follow these steps:

Insert your image into your page using Insert > Image.
Now select the image with the Properties panel open.
You will find in the bottom left corner of the panel the word Map with a text box and 3 blue icons under it.
Give your image map an appropriate name in the text box.
Now click on either of the blue icons which are hotspots drawing tools (Rectangular, Oval and Polygon hotspot tools). Hotspots are like links only difference is that they have location co-ordinates on the image.
Now draw your hotspot area which on clicking should go to a particular link. Give the link details (link, target and alt tag).
After you have drawn and defined all your hotspots, just click on the black arrow icon below the map name to get back the arrow cursor.

That's it your image map is ready!

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization

This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!

SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!