cancel
Showing results for 
Search instead for 
Did you mean: 

Mouseover Image

Mouseover Image

(1)

I would like to create a landing page where students are able to see a picture for each unit and then see the title of the unit once they hover their mouse over the image. Currently, you can set it up with the HTML editor, but when you save it, required attributes are stripped because they are not whitelisted.

352056_Front Page_ Spanish 3H.gif

In order for this to work, the whitelisted code would need to be updated to allow this code:

<img onmouseover="this.src='NAMEOFSOURCE2';" onmouseout="this.src='NAMEOFSOURCE1';" src="NAMEOFSOURCE1" alt="Hover" width="100%" />

5 Comments
Stefanie
Community Team
Community Team

 @cody_denton ‌, thanks for sharing this idea; it is open for general consideration and discussion as a request to support these tags and elements in the HTML editor.

Out of curiosity, would placing alt text on the images serve to accomplish this (as described in How do I manage alt text and display options for images embedded in the New Rich Content Editor as a...? Or would this not work for the use case depicted in your screenshot because these are animated images? Or is there another reason alt text wouldn't work? 

cody_denton
Community Member

stefaniesanders‌, The alt attribute is helpful if the image is unable to load or if you are using a screen reader. It doesn't, however, let you set the condition to change the picture when a student mouses over.

susan_day
Community Member

This would be super useful for casual quizzing and games. Great learning tool as well as looking nice.

cody_denton
Community Member

I had not even thought about using it for this, but yes, that would be a

great way to use this feature!

On Thu, Jul 16, 2020, 10:34 PM susan.day@ubc.ca <instructure@jiveon.com>

dmace13
Community Member

This is also a helpful feature with remote learning now in that we could setup an image to indicate the current module they are on when they hover over the image as well.