HTML image map in Canvas

DrNufer
Community Coach
Community Coach
1
2312

Until recently, I didn't even know this was possible.  I knew that we are able to upload an image and hyperlink it, but apparently it is also feasible to hyperlink specific portions of an image.  It takes a bit of prep work, working with pixels and HTML, but the final product is stellar.  Disclaimer, HTML maps will likely not render well on mobile devices unless you ensure that the image is on the smaller side - perhaps 480 pixels wide.  But if you ensure that students are on desktops or if you want to use this as a classroom activity on the projector then I invite you to explore.  Check out the tutorial and links below.

 

Visit the blog to grab my code:
https://www.howtocanvas.com/create-amazing-pages-in-canvas/html-image-map 

If you’d like to see the Canvas page from the tutorial: 
https://canvas.instructure.com/courses/2560052/pages/image-map-html 

1 Comment
PhillipsSocial
Community Member

Hi! 

This was really helpful, but it only goes so far. The hot spots go to other Canvas pages, which works for things like blueprints and when the teachers know what they are doing, but it makes creating interactive content for teachers-with-not-so-great-tech to use with students difficult. 

Is there a way to convert those links to other pages into pop ups on the page? 

Thank you.