Image Maps Reference Guide - Version 1 Home | Print Full Reference Guide     
image.gif
Working with Image Maps
An image map is used for mapping different areas with links to a single image. The different areas (spots) can be clickable and linked to different destinations.
ON THIS PAGE

  Working with Image Maps
   Drawing a circle hotspot
   Drawing a rectangle hotspot
   Drawing a polygon hotspot
Working with Image Maps

  1. The first step will be to insert an image. To do so, click on the icon.
  2. Once you have inserted the image, click on the icon.
  3. Click on the button to display the newly added image.
  4. The refreshed list should now contain your new image. Select the image and click .
  5. In Draw Mode, use the rectangle, circle or polygon tool to draw hotspots over sections of your image.

    Drawing a Circle Hotspot
    1. Select the Circle radio button.
    2. Enter the URL to which the hotspot will point.
    3. Now, let's draw the circle. To place the first coordinate of your circle, find the location on the image and click once to place it. A yellow circle will be added, as per example below.
    4. Click second time to place the second and final coordinate of your circle. You should now see a semi-transparent circle with blue border. Do not be concerned about its color. It will later become invisible.
    5. Next, click on button and now would be a good time to your changes as well.
    Drawing a Rectangle Hotspot
    1. Select the Rectangle radio button.
    2. Enter the URL to which the hotspot will point.
    3. Now, let's draw the rectangle. To place the first coordinate of your rectangle, find the location on the image and click once to place it. A yellow circle will be added, as per example below.
    4. Click second time to place the second and final coordinate of your rectangle. You should now see a semi-transparent rectangle with blue border. Do not be concerned about its color. It will later become invisible.
    5. Next, click on button and now would be a good time to your changes as well.
    Drawing a Polygon Hotspot
    1. Select the Polygon radio button.
    2. Enter the URL to which the hotspot will point.
    3. Now, let's draw the polygon. To place the first coordinate of your polygon, find the location on the image and click once to place it. A yellow circle will be added, as per example below.
    4. Click second time to place the second coordinate of your polygon.
    5. Repeat above step to add as many coordinates as needed. To complete the polygon, click on the very first coordinate. When you are done, you should see a semi-transparent polygon with blue border. Do not be concerned about its color. It will later become invisible.
    6. Next, click on button and now would be a good time to your changes as well.
  6. In Drag Mode, you can reposition hotspots, edit their URLs or delete them altogether. To do so, click on button.
  7. And now click on any of the hotspots you drew. You should see the following new buttons:
    • To update the URL, select a hotspot, enter a new URL in URL input field and click . NOTE: The URL must always begin with "http://".
    • To remove a hotspot, select it and click .
    • To modify the shape of a hotstpot, select it and click . The yellow coordinates will then appear.

      Click on any of the points to activate; the point you clicked on will turn red.

      Finally, drag the selected point to resize the shape any way you like.

      When you are done, click .
  8. Finally, don't forget to always save your changes. You must always .


Back to the top
Updated November 14, 2012