Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
You are here : : Home > Free Resources > Dreamweaver Tutorials > Image Maps  


Featured Fireworks & Dreamweaver Template

Family Template 7
Family & Kids

Dreamweaver Image Maps

Written by
Learn how to link to different pages from the same image using image maps in Dreamweaver.

What are image maps?

An image map is an image that has been divided into regions, or "hotspots"; when a hotspot is clicked an action occurs, for example a new file opens. The image found at the bottom is an example of an image map. All the links are in one image which are linked to different pages.

You can also make circular links and polygon links as shown below.

Steps to creating an image map in Dreamweaver

  1. Select the image on which you would like to make multiple links. Click on the rectangular hotspot tool found in the Properties Inspector. Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot. You can also choose the oval or polygon hotspot tool to make an oval or polygon selection.

  2. In the hotspot Property inspector's Link field, click the folder icon to browse to the file you want opened when the hotspot is clicked. Alternatively, type the file name.

  3. Repeat the above steps to define additional hotspots in the image map.

  4. That's it! You have now successfully created an image map.

The code will look like this.

As you can see from the code you need to specify the coordinates for the hotspots.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

Looking for high-quality Website Design? Choose from over 60000 templates!

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver


Best Wordpress Themes of 2017

best wordpress themes of 2017

Featured Template
Template # 54553
Type: PrestaShop
Price: $139