HTML image map in Canvas

Convert your uploaded image into an interactive map of hotspots. This is a fantastic way to create dynamic content in your Canvas course by hyperlinking specific portions of an uploaded image. Level up!

Check out the write up:

You can also visit the Canvas sandbox pages:

Table of Contents example:

For a more comprehensive tutorial on hyperlinking, refer to my post:

0:00 - Intro
1:21 - breaking down the HTML (beginner level)
2:57 - rectangle coordinates
6:01 - circle coordinates
7:05 - polygon coordinates
8:57 - putting it all together
11:37 - example: table of contents
12:42 - wrapping up

Please consider subscribing for more Canvas tips and tricks:

[jezzaw]

OMGOODNESS!!! This is fantastic!!!! So clever!

[davidalexander]

This video is gold! Thank you for making it!

[innovationteachingdigitallearn]

Do image maps work on Canvas Front Page?

[stellaspence]

How well does this work if someone was interacting with the page on a mobile device?

[BRigwald]

Is there a way to do image maps dynamically. The problem I ran into when I did an image map was that students changed the size of the screen (for example, by opening the left side menu), then the coordinates were off. Is there a way to have the coordinates adjust if the size of the image changes?