cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor

Change image when mouse hover over the image

Hi All Canvas users,

I've been looking for the function that can make an image change to another image when I hover over it.

I suppose using html editor is the solution. However, it seems doesn't work successfully when I adopt the code from this website:https://www.templatemonster.com/blog/create-rollover-image-effect-css-html-js/

Would someone had experience in this could point out why it does not work, share the code, or any tips for me to do this?

Thank you. 

3 Replies
Highlighted
Navigator

gwen.shen@sunderland.ac.uk,

All of the techniques shown on the page you link to require features that are not supported by the Canvas HTML Editor Whitelist. This means that they are stripped out before the content is saved.

  • JavaScript is not supported, which rules out the first approach with the onmouseover and the third approach that is JavaScript.
  • You can only add CSS definitions to the elements themselves, not as styles to the head element of the document. That means that you would have to apply the CSS directly to the element, but the hover pseudo-class isn't supported, so it would still not get the effect that you want.

Here are some things you can do:

  • You can create your own HTML pages and host them somewhere else and then embed that image into Canvas.
  • You can get your Canvas Admin (if that isn't you) to find a library that they add to the Canvas custom JavaScript and then it will run.

Watch out with accessibility issues on this one. If you change the image, how do you change the alt tag that describes the image? How do you notify people with a screen reader that the image has changed? Make sure that you support the keyboard.

Here's a similar question from 2015 that basically arrived at the same answer: Creating a Rollover Image in Canvas 

Highlighted
Community Coach
Community Coach

Hi gwen.shen@sunderland.ac.uk 

There is an HTML solution in our CanvasHacks Demo Course for a video carousel, but works for any URL resource including images. I will echo what james@richland.edu said about accessibility issues. If the Alt Text is embedded in the image, it should still be available in the carousel, but these types of page tools can still be tricksie with screen-reading tech. Anyways, here's the stuff...............

[Credit to John Lowe (Links to an external site.)Links to an external site., who first shared (Links to an external site.)Links to an external site. this solution to a question posed by Steve B (Links to an external site.)Links to an external site..]

Use case: I want to give students a series of related videos, and would like to keep them on the same Page/etc. yet not build a table of video frames or links which could take up Page space.

This process creates a single <iframe> on a Page/etc., within which each of the videos will play when the link is selected. (The process would also work, more broadly, to display any resource with a URI, not just videos as in this case.) The key is having the <a>s reference an internal Canvas link (the *.html docs), which allows the use of the named target attribute (if the <a> references an external URL, target always = _blank).

Two-step process:

1. Create, and upload into your course Files, an *.html file for each video, with content as here:

<iframe src="https://player.vimeo.com/video/77046793Links to an external site." width="100%" height="400"></iframe>

2. Create your Page with a single iframe at the top, and links to those *.html files beneath, as below.

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" width="400" height="300" name="box"></iframe></p>

<p style="text-align: center;">single iframe in the space above</p>

<a class="Button Button--secondary" href="https://community.canvaslms.com/courses/1572734/files/68152407/download/?download=1" target="box">Vimeo #1</a>

<a class="Button Button--primary" href="https://community.canvaslms.com/courses/1572734//files/68152406/download/?download=1" target="box">Vimeo #2</a>

<a class="Button Button--warning" href="https://community.canvaslms.com/courses/1572734//files/68152405/download/?download=1" target="box">Vimeo #3</a>

 Enjoy,

Kelley

Uploading HTML files to Canvas for use within Canvas is definitely a hack. As much as I've helped people figure out ways around Canvas, some might say I would be all in favor of this, but this is one work-around that I wish people would forget about. It's hard to manage and every time you update the file, the file ID changes, which means you need to update the links. Embedding on an external website is definitely the Canvas-preferred method.

In addition, the uploading of HTML files that contain JavaScript within the course was identified as a potential security risk and Canvas has implemented a Canvas Security Policy (CSP) that may affect people using this. The CSP is opt-in, so it may not be implemented at a particular institution, but I wanted people to be aware of it.  Here are some links to the story (from oldest to newest)

Labels