Basic Clickable Image Map: code-snippet

Community Champion

Outcome: make a single image with multiple clickable regions to point to multiple URIs.

General overview:

  1. Upload the base image ("map") into the course Files.
  2. Create an *.html document (in Notepad or similar), in which you'll specify the coordinates on the image which correspond to the various target URIs.
  3. Upload the *.html document you created into the course Files.
  4. Point at the *.html document within the course - via direct link, or as a Module object.

In action:

  1. I first uploaded a "map" image called "map-sophos-1.jpg".
  2. I used Notepad to write an *.html document as follows:

<img src="/courses/1025982/map-sophos-1.jpg" alt="course map" width="100%" height="" usemap="#Map1" />

<map name="Map1" id="Map1">

<area shape="poly" coords="324,566,556,451" href="" />

<area shape="poly" coords="655,537,560,449" href="" />

<area shape="poly" coords="316,567,321,482" href="" />

<area shape="poly" coords="589,209,597,196" href="" />

<area shape="poly" coords="155,276,162,239" href="" />


Things to note:

In the <area> tags, shape= specifies polygon areas, coords= sets the 4 corners of each area, href= sets the target of each area's click.

The shape= attribute can also use other shapes - "rect", "circle".

  1. I uploaded the *.html file into the course Files.
  2. I added the *.html file as a Module item.

Things to note:

Canvas will display the map within an overflow box, if the image is tall.

The result: In the image below, the various "regions" on the map actually represent differently-targeted clickable areas!