Image maps are a handy way to provide a user with a visual navigation system they can click to move around your site. We’ll show you how to create and code an image map in any version of Dreamweaver. The process of creating an image map is twofold. First, you need to create a suitable image to use; second, you need to define the areas that will be clickable and then link these to places on your web site or to some other web site. Start in your graphics program and create an image to use. Think about which areas you’ll designate as being clickable. Save the image as a JPEG or GIF — ours is a JPEG because it contains photos.
Our image map will provide a clickable navigation for tourist attractions in Sydney. Each image will be clickable and will take the visitor to pages relating to the zoo, beaches, the harbour and the city itself. You’ll find it’s easier to create the image map code in Dreamweaver if you first create the pages you plan to link to, even if they don’t have any content yet.
Insert the image into your page in Dreamweaver and then follow the guide below to create image map areas in Dreamweaver. A single image can have multiple map areas and ours will have four for the four attractions. The shapes can be circles, rectangles or polygons or any combination of these — ours are all rectangles.
Like other links that you create in Dreamweaver, you can set a target for the link so that the page you’re linking to loads into the current browser window or into a new one, for example. Links don’t have to be to other pages — you can link to a file to download or a larger image.
You can have overlapping hotspots on an image map, although the first one that’s encountered in the code is the one that will control the behaviour if the user clicks in the overlapping area. To move and reposition hotspots, click the Pointer Hotspot Tool on the ‘Property Inspector’ and click on a hotspot to select it. You can then drag it to a new position, resize it or press Delete to remove it.
One benefit of using client-side image maps for navigation is that all the processing which occurs when a user clicks on the image takes place on the user’s own computer — that’s why they’re called client-side image maps. The user doesn’t need any special add-ins and you don’t need to install any special server technology to make it work — a simple HTML page is all you need.
Add an image hotspot in Dreamweaver
