HTML Image Map in Canvas
What is an image map?
You are probably familiar with hyperlinking an image. If you upload an image in Canvas, highlight it, and click the hyperlink button in the Rich Content Editor, then you will be able to hyperlink the image. When the student clicks on the image, you can redirect them to a website, load a popup email, take them to another page or resource in Canvas, etc. For a more comprehensive tutorial on hyperlinking, refer to my post: What is an HREF?
Image mapping is different than hyperlinking an image, because you are essentially able to hyperlink certain portions of the image. For example, in the image below, I hyperlink the highlighted paint pallet, the painting canvas, and the chair, but not the portions outside of those areas.
Note that the image above is not mapped out/hyperlinked, but you can see a working example on my sandbox Canvas page.
Circle and rectangle hotspots
Let’s start by reviewing the rectangle and circle maps.
For a rectangle, we need to define the coordinates for the upper left corner and the lower right corner. The upper left corner is referred to as x1, y1. We are essentially looking for the x1 value (the distance in pixels from the left part of the map to the left part of the rectangle) and the y1 value (the distance in pixels from the top part of the map to the top part of the rectangle). These coordinates are this represented as such:
coords="left,top,right,bottom"
coords="x1,y1,x2,y2"
coords="204,20,460,205" (as an example of what the values might look like)
For the circle, we need to know where the center of the circle is from the top left corner of the map. So we are looking for x1 (the distance in pixels from the left part of the map to the center of the circle) and the y1 value (the distance in pixels from the top part of the map to the center of the circle). These coordinates might look like:
coords="center from left, center from top, radius"
coords="x,y,radius"
coords="113,106,75"
Here are the values we are looking for:
To find the coordinates for you hotspots, you’ll need to use a photo editing tool that has rulers in pixels. I’m using Photoshop, but there are other platforms available as well, such and Gimp, which is an open source option. All the coordinates are based on the upper left corner of the map, which is coordinate 0, 0. An x value of 100 would be 100 pixels down from the top, and a y value of 200 would be 200 pixels to the right on the y axis
>> Important: when you are creating the coordinates for the HTML map, you must use the picture that you plan to upload into Canvas <<
What you don’t want to do is create a map based on a 600 pixel by 400 pixel image, and then upload the image to Canvas and change the dimensions to 300 x 200. The HTML map will still refer to the original coordinates and it won’t align with the new image dimensions. Likewise, you can’t adjust the image to fit a % of the screen (e.g. width: 100%;), because screen sizes are variable and the pixel coordinates are established regardless the screen size.
Note: image maps will not render correctly on mobile devices.
Polygon hotspots
Rectangles and circles are pretty straightforward, but you can map out complex objects and shapes as well - known as polygons. For image map polygons, you will need to gather all the points in the polygon. If there are curves then you you will need to gather many coordinates. The more coordinates you have, the more precise the curve will be. Though keep in mind that it’s really not that important to be overly precise. If the polygon is a pentagon, then you will need five sets of coordinates - a set being one x value and one y value. To get my coordinates for my polygon, which in the image I’m using is a chair, I again use photoshop. The F8 button is a shortcut in Photoshop to pull up the image info tab, which will help you locate the coordinates of your mouse cursor over the image. Use this information to retrieve all the data you need.
When establishing your coordinates for your polygon, it doesn’t matter where you start - just pick a spot. My my example, I start X1,Y1 toward the upper left portion and worked clockwise. Again, when you have curves then the more coordinates you have the more precise the curve will be. But nobody will critique you if the hotspot is a bit more “geometric”. When you are finished with your shapes, you may get a final product that looks like:
<img usemap="#desk" src="https://canvas.instructure.com/courses/2560052/files/173402172/preview" alt="hyperlinked image" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/2560052/files/173402172" data-api-returntype="File" /> <map name="desk"> <area shape="rect" coords="204,20,460,205" href="/courses/2560052/pages/image-map-html-painting" alt="painting" target="_blank" /> <area shape="circle" coords="113,106,75" href="/courses/2560052/pages/image-map-html-palette" alt="palette" target="_blank" /> <area shape="poly" coords="217,255,226,258,235,239,434,240,446,252,458,251,476,256,481,272,465,290,383,315,332,319,250,309,202,288,195,278,199,268,209,259" href="/courses/2560052/pages/image-map-html-chair" alt="chair" target="_blank" /> </map>
My final thoughts are that you should aim to keep your images on the smaller side. I would say the width should be no longer than 600 pixels. You could try 800 pixels, but that may be large for some of the more modest computer screens. This will not be a great interaction on mobile screens.
Also note that technically the HTML image map doesn’t need to be applied solely to images. You could also apply the image map to tables and other elements as long as you know the exact pixel dimensions. Try it out!
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas