How to create a clickable image map in Dreamweaver CS4/CS5
An image map or a clickable image map is a web image containing (sub-)areas that linked to different content or web pages. Each clickable area is often referred to as a hotspot. Image map is useful in presenting and organizing information where you let web visitors see the big picture and also give them the option to click around and explore the areas of interest. An example would be something like the image on the left with four distinctive areas constructed by the puzzle pieces. Each puzzle piece may represent one of your products or services or anything else.
Without using a web editor like Dreamweaver, image map is not at all easy, if not very difficult to create because we need to identify the coordinates of the points that outline around the hotspots. Here are the steps to create image map in Dreamweaver CS4 or CS5 although I believe CS3 or even CS2 would be the same.
Note: If you want to add an interactive world map, a real Google map, to your site, I have a related posted of how to create an interactive world map with mouseover data for your website. Be sure to check it out.
Steps to create image map with Dreamweaver CS4/CS5
Make sure you work in the Design View or Split View (not Code view) in Dreamweaver
Insert an image onto your HTML page by using the menu Insert/Image
Click on the image to select it. This will display the Image section on the Properties panel.
Look at the Map area (screenshot above), you’ll see different shapes used to draw your hotspots. In this example, click on the rectangle shape; then move your mouse over the image; press the mouse and drag it to draw a rectangle over the area you want the hotspot. Your hotspot is highlighted in blue/cyan and stays on top of the main image.
Fill in the properties for the hotspot in the Properties panel including Link (the URL), Target (Whether you want to open the URL in a new or the same window. Use the drop-down to select value and test to see the difference) and Alt (the description for that specific hotspot area. This description won’t be visible. It’ll be read by screen readers for visually-impaired people). You’re now done with your first puzzle piece. Repeat the steps above to draw the rest of the hotspots. You can choose the Polygon Hotspot Tool for better accuracy.
Last comments
Image map will look just like a regular image, so you’d need to make sure by one way or another your viewers are aware that the image is clickable and will open to a lot more information. The simplest way is to write an instruction You can click on different areas of the image to get more information.
Image map can also be useful to show a list of your locations/distributors etc. You can display a map, then create hotspots for the areas where you have your stores/offices/distributors. When people click on a certain area, they’ll get further contact info specific to that location/distributor.
With the advance of web technology, there are other tools that can sometimes do a better job than image map does. Examples would be Adobe Flash, CSS (positioning) and javascript/jQuery. However, image map can come very handy some time, especially when you have Dreamweaver and need a quick way of linking up areas of your image.
Great Read. I’ll look forward to your next article
Pretty straight forward and easy to follow. The puzzle piece is exactly what I’m using the image map for 🙂