Basic Clickable Image Map: code-snippet

Document created by G.Petruzella@mcla.edu Champion on Apr 21, 2015
Version 1Show Document
  • View in full screen mode

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="https://mcla.instructure.com/courses/1025982/wiki/entering-thauma" />

<area shape="poly" coords="655,537,560,449" href="https://mcla.instructure.com/courses/1025982/wiki/entering-logos" />

<area shape="poly" coords="316,567,321,482" href="https://mcla.instructure.com/courses/1025982/wiki/entering-episteme" />

<area shape="poly" coords="589,209,597,196" href="https://mcla.instructure.com/courses/1025982/wiki/entering-further-phusis" />

<area shape="poly" coords="155,276,162,239" href="https://mcla.instructure.com/courses/1025982/wiki/entering-ethos" />

</map>

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!

 

ddis-map-screenshot.png

4 people found this helpful

Attachments

    Outcomes