Map an Image in Dreamweaver

Mapping an image in Dreamweaver is pretty simple. In this tutorial I will explain step by step how to map an image in Dreamweaver. But first, let’s cover the basics: What is mapping an image and What does it do?

What is Mapping an Image?

Mapping an image is when you use the mapping tool in Dreamweaver to draw a shape over an image or a certain part of an image. You can choose from three shapes: square, circle, or polygon. The polygon shape can be used to freely draw a map over an image.

What does Mapping an Image do?

By mapping an image you can turn that image into a link. For example, if your logo is an image, you can map your logo to make it a workable link. Many sites map their logo and link it to their homepage. So if you’re surfing their site you can click their logo and return to their home page. Now that we have covered what mapping an image is and what it does, we’ll move on to how to map an image.

First you will need to open the image that you want to map up in Dreamweaver.

Step 1 – Click on the image that you want to map.

Step 2 – Locate your properties panel in the bottom of your Dreamweaver window. In your properties panel, below “Map”, you will see an arrow, a square, a circle, and a polygon.

Step 3 – Choose the shape that best fits your image. Once you have chose your shape, place your mouse over the image waiting to be mapped.

Step 4 – Hold the left mouse button down and drag your mouse over the image. Once the shape is covering the image, release the mouse.

Step 5 – Now go back to your properties panel and fill in the information that you wish to apply to this image. To link this image you need to fill in the URL in the link field.

Step 6 – When you have finished filling in the fields in the properties panel, click File / Save. Now your image is mapped.

To preview your mapped image press F12. Once you have uploaded your page you will be able to click the image and it will carry you to the URL that you assigned to it. Mapping an image can also be used to link to other sites.

Leave a Reply

Your email address will not be published. Required fields are marked *


five × = 20