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:

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

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!

[u0291895]

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!

[Chris_Hofer]

I've not tried this myself, but it seems like you could just add target="_blank" after the URL in the code?

[Amanda_L_Albrig]

There is an application called Thinglink (Make Your Images Interactive - ThingLink ) that allows you to create interactive images and then use the iFrame code to embed them in the Canvas page.​

[G_Petruzella]

Hi u0291895​ -

Yes, you can link to any Canvas Page in any of the URL references.  @Chris_Hofer ​ suggested what I'd do too - add target="_blank" to ensure that clicking will open the link in a new tab/window.

--

/gerol

[u0291895]

This will open in a new tab, but not a popup. Right?

sI found this online:

<SCRIPT TYPE="text/javascript">

<!--

function popup(mylink, windowname)

{

if (! window.focus)return true;

var href;

if (typeof(mylink) == 'string')

  href=mylink;

else

  href=mylink.href;

window.open(href, windowname, 'width=400,height=200,scrollbars=yes');

return false;

}

//-->

</SCRIPT>

But I think the RCE stripped it last time I tried. I'd like HTML5 files or .swf files to open in the popup and then to be closed by the learner.  It's the workflow they are use to in our current LMS and I'm hoping to demonstrate we can keep this functionality in Canvas.

Thanks for the help!

[G_Petruzella]

Hi u0291895​ -

Yeah, I see what you're thinking - and scripts do always get scrubbed in the RCE. Crazy brainstorming here... I wonder if you could (a) upload a *.swf, then (b) write your own *.html doc which invokes the script to call the *.swf, then (c) use the *.html as a Module item. Full disclaimer - this is an entirely untried method, informed by no knowledge or experience. I just happened to have read  @Chris_Hofer ​'s blog post on Embedding Flash (SWF) Animations in Canvas. 😄

If I have a minute to actually test this, I'll share in the Group.

--

/gerol

[Chris_Hofer]

And just for reference, my blog post can be found here: Embedding Flash (SWF) Animations in Canvas

[G_Petruzella]

FWIW, I've just cobbled together a test based on the workflow I mentioned in my last response to you, u0291895​. I've not been able to generate a popup - but someone might look at what I did and see where the problem lies.

1. I uploaded a sample *.swf into the course Files.
2. I wrote an *.html document in Notepad with the content below, then uploaded that into the course Files.
3. I added the *.html as a Module item.
4. Result: I see the *.html displayed in a window, but when I click the link which is supposed to generate the popup, the *.swf starts playing within the same window instead. Basically, the click simply follows the href, rather than activating the popup.

Below is the content of my *.html:

<head>

<SCRIPT TYPE="text/javascript">

function popup(https://mcla.instructure.com/courses/1572734/files/67305898/preview, PopUpTest)

{

if (! window.focus)return true;

var mylink;

if (typeof(mylink) == 'string')

   href=https://mcla.instructure.com/courses/1572734/files/67305898/preview;

else

   href=https://mcla.instructure.com/courses/1572734/files/67305898/preview;

window.open(https://mcla.instructure.com/courses/1572734/files/67305898/preview, PopUpTest, 'width=400,height=200,scrollbars=yes');

return false;

}

</SCRIPT>

</head>

<body>

<p>This is a test.</p>

<a href="https://mcla.instructure.com/courses/1572734/files/67305898/preview" onClick="return popup(this, 'PopUpTest')">My Test Pop-Up!</a>

</body>

Have at it, Canvas code people! 😄

[G_Petruzella]

Hi Deactivated user​ -

Hmm, I'll take a look and let you know if I spot anything!

--

Gerol

[G_Petruzella]

Hi again Deactivated user​ -

OK, I think I see what's happening... The issue is that only some, but not all, HTML elements are allowed directly on Canvas Pages. Some elements get automatically "scrubbed out" - like <map>. There's a whitelist (*.pdf)​ which lists all the "allowed" HTML tags, attributes, and style properties in Canvas.

So how to use <map>, if Canvas always blocks it on Pages?

My answer:

1. First, write your own HTML document - a basic text-editor like Notepad would be fine to do this - just include exactly the code you wrote already.
2. Upload that *.html document into your course Files area.
3. Then, on your course Front Page, embed that *.html document within an <iframe>, as e.g.

<iframe style="display: block; margin-left: auto; margin-right: auto;" src="/courses/1417596/files/76454085" width="95%" height="450" ></iframe> **[the src value is the path of the *.html file you uploaded; right-click the filename to copy the link address]**

I believe this will do the trick - let me know!

[nganter]

Thank you a lot for this contribution, after some fiddling with the code this now works!

[elouise90]

@nganter What were you able to write that made this work? I have a professor that would like an image map on their home page but nothing I've tried seems to work!

[nganter]

how to delete a duplicate comment?

[nganter]

@elouise90 I first wrote my own code on my own homepage

https://researchers.ms.unimelb.edu.au/~nganter/test/classmap.html 

using an online tool called imagemap.net.

Then I embedded it into Canvas using an iframe. 

I made sure to also create a Screenreader accessible version of the map and link to it.

I could not figure out how to get Canvas to allow scaling of the iframe to the device size, for some reason it insists to sanitize away that functionality, but I was not too fussed about this.

If the page was not the homepage of the course, I wouldn't bother with the iframe and simply weave an external page into the module. This is becoming my method of choice for most of the content I am building, allowing me to code with ease while at the same time being able to take advantage of some of the really nice Canvas features, like peer review. I hope this helps. Nora