How do I make a section of an image clickable?
If you're asking yourself "How do I make a section of an image clickable?," this FAQ should help point you in the right direction.
To begin making sections of an image clickable, left-click on the image to select it in the editor. With the image selected, click on the "Edit Image Map" icon.
After you have clicked on this icon, a new window will appear with the image on the left, and buttons on the right.
* Note: Ensure that the image being used for the image map has been uploaded in the proper size. If you resize an image in the editor, you will not be able to image map it.
To make a section of your image clickable, you need to define an area for people will be able to click on. You have the following options:
Each area type allows you to create a shape which acts as the area a person can click on. When you choose one of these shapes, it will appear over the image on the left. The red borders around the shape can be moved by clicking on the rounded edges (in the case of Boxes and Polygons). For circles, use the rounded button in the center. These will allow you to move the shapes around and adjust them as required. The red borders around the shape are not displayed when you are finished editing.
When you are finished adjusting the shape of the image map, you'll need to set up the URL (the address of the link). You can set up the link using the URL: text box.
After the URL has been entered, you need to give the shape a name. Shapes need to have unique names to function correctly. Having two shapes with the same name will cause your image map to not function correctly. The name is represented by the box labeled Title.
You may have noticed a box labeled Alt. Alt stands for Alternative Text, and this text would show up if you moved your mouse over a clickable area. After a short period of time without moving the mouse, a small text label will appear with a description of the link. For example, if you had a link set up for someone to purchase apples, the alt text may say: "Purchase an apple today!" Alt text is completely optional.
If you would like to go back and edit a different shape you have created, you will find a list on the top right corner of the window. Each shape's name is prefixed by its type. For example, a circle shape is prefixed with circ:. Other prefixes are rect: (Box shape), and poly: for polygon.
Once editing is completed, use the Save or Next button to save the changes. The image map will not function unless you use the Preview button. Using the preview button in the editor will allow you to see if the clickable areas are set up correctly.
A quick way to tell if an image map is working is to look in the status bar of your browser. Most browsers display a URL's destination in the status bar when you move your mouse over a link. When you view the message preview, look at the status bar when you move your mouse over clickable areas of the image to quickly see where on the image someone can click and where they will be sent to when they do click on the link.