cancel
Showing results for 
Search instead for 
Did you mean: 

Adding a customisable (clickable) compound image within a page

Jump to solution

A reduced quality image with embedded boxes that when clicked go to other urls.

I am trying to embed an image with clickable elements within a page RCE ( the above is a reduced quality illustration with boxes that when clicked navigate the user to other pages or external urls.) A table will do this to a basic level, but it will not suffice if the buttons overlay the main image. For more complex images (like one illustrated), a table does not suffice because of the difficulty aligning all the image slices.  A more satisfactory solution is to have one image already created with the clickable slices embedded. I have already created the image and slices within Photoshop, but I am experiencing great difficulty trying to make it work within a Canvas page. The best I can do is upload the index html page and slices to the file area, and then link from a button on the home page. This technique is not pretty, is clumsy and presents potential security challenges if files are not restricted. If I open the index page in a text editor and copy the html across to the html page, I can't get the slices to align.

I am aware that customisable links may be added through JavaScript in the Theme editor, but it seems to me those edits are global.Does anyone have any solutions for this through the RCE of a page? Thanks.

1 Solution

Accepted Solutions
4 Replies
Community Coach
Community Coach

Hello de.millington@mbro.ac.uk...

What you are describing is commonly known as an "image map".  While nothing exists in the current Canvas interface, I did find a blog post by jnassif@llu.edu over in the Instructional Designers group called Image Mapping for a Homepage (aka Image with Multi Links) that may be of interest to you.  If you are not yet following the https://community.canvaslms.com/groups/designers group, please click on the group link, and then click on the "Follow" button.  Next to that button there is also a link for "Actions".  Click on that, and then click on "Join group".  I hope this will be of help to you, David.

Thanks for making the effort to respond to this Chris.

I followed John Nassif's instructions to the letter, but alas when I link back to the html file he recommends saving via a word doc, it merely produces an html file displaying that html code:

295649_HTMLHomePage1.png

I should like to point out that our institution has many security lock-downs when it comes to Internet access. When I upload the image and vector-in the weblinks, Image-Map keeps telling me the site is not secure. I have asked our Info Services folk to evaluate the site for possible whitelisting because I think it has the potential for being a useful tool. I think the obvious potential dangers available here are for hackers using redirects.

In the meantime, I can say I have successfully created an interactive webpage with an alternative method using a blend of the following:

1) Photoshop - enables the user to embed interactive content and export it as webpage

2) Re-editing the html page using some of the techniques that John Nassif promotes in his video. In my case I opened the html file in the text editor, Visual Studio to set the target links to open in a new pages. It is veritable to point out to the Canvas community that if new targets are not set, the result is that Canvas opens the target frame within the original frame (i.e. you will see the global navigation bar twice).