Basic Clickable Image Map: code-snippet

G_Petruzella

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:

https://mcla.instructure.com/courses/1025982/wiki/entering-thauma" />

https://mcla.instructure.com/courses/1025982/wiki/entering-logos" />

https://mcla.instructure.com/courses/1025982/wiki/entering-episteme" />

https://mcla.instructure.com/courses/1025982/wiki/entering-further-phusis" />

https://mcla.instructure.com/courses/1025982/wiki/entering-ethos" />

Things to note:

In the

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".

3. I uploaded the *.html file into the course Files.
4. 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!

unknown

Gerol,

Thanks this is exactly what I want to attempt to do in a course I'm creating. I should be able to link it to a Canvas page using the page url right? Do you know if there is a way to make it open in a popup window?

Thanks for the code!