How to use an Imagemap

1. Select image


Click on the icon "Select image" in the toolbar and browse to the image you would like to use for the imagemap.
Screenshot of image selection

2.

Select an area

There are three different tools for marking an area you want to use as a link. The tools you are able to choose from are a rectangle (5), a circle (6) and a polygon (7). Click on any of the tools and then click-and-drag (in the example a rectangle) to place your rectangle on the desired place on the image where you want to create the link.

Screenshot of a selection of the image area
The size of the area can be altered by pulling the corners. If the area is larger than the image, the overflow will be erased when the imagemap is rendered online. In the work area for the imagemap the complete area is displayed.

3. Add a description and the link address


When you have selected an area of the image the field description will become active. Here you add a description of to where this area is linked. Click on Browse and type address or browse to the link destination.
Give the area a description and select link destination
OBSERVE! The pages linked to the image map must be published to become clickable!

4. Repeat step 2 and 3 to add more areas in the image

5. State an image description for the imagemap


Give the imagemap an image description, describing the whole image.
Give the imagemap a description

6. Done

Imagemap
The result is:
Screenshot of the imagemap

A tip for accessibility! For increased accessibility you can provide text as an alternative to image maps. SiteVision is using client based imagemaps.

  • Describe the object with an alt-text.
  • Describe each link in the object with a title-text.

Denna sida publicerades: 2015-05-13

Skriv ut PDF-avsnitt

Hjälpte informationen på den här sidan dig?

Find us!

SiteVision AB (Headquarter)
Vasagatan 10
702 10 Orebro
Sweden

Info: +46 19-17 30 30
Support: +46 19-17 30 39

Latest Tweets