Creating image maps are useful for when you only want a specific area or multiple areas to display more information or to link to another webpage. Adobe Dreamweaver makes this process simple and easy. In this tutorial I will be focusing on just creating links within images.
1) Open up a new HTML document.
2) Import an image via Insert > Image and select the picture you plan to use from the file directory, then press OK for any popup windows afterwards to insert the image into the document. For this example, I’ve used a simple photograph of a golf ball which you can download here.
3) Switch to Design View (found at the top) and make sure the Properties panel is open, which can be found via Window > Properties on the top menu.
4) Time to draw the image map. Select the Circle Hotspot Tool in the Properties panel under Map.
5) Next, drag out a circle over the golf ball and release. Click OK on the message window talking about the “alt field”. If the circle is out of place, you can use the Selection Tool (press V on keyboard) to drag the circle into place.
6) While the circle is still selected, enter in the URL that you want the button to link in the Link field. Also select _blank from the Target dropdown menu – this will open up a new window when you click on the golf ball. Finally in the Alt field, enter in Golf Ball.
7) Save the document by going File > Save or Cmd/Ctrl + S. Click on the little globe icon, which is the Preview/Debug in browser option and select a web browser to view the finished document on.
Test out your new image map to see that only the golf ball on the image is a click-through link:
The post Dreamweaver: Creating Image Maps appeared first on Academy Class Blog.