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%" />

7 Comments
Stef_retired
Instructure Alumni
Instructure Alumni

 @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 Novice

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 Explorer

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

cody_denton
Community Novice

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 Novice

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. 

cyhumbert
Community Member

I would love to be able to add the hover command so students can more easily find buttons, etc.!

ProductPanda
Instructure
Instructure
Status changed to: Archived
Comments from Instructure

As part of the new Ideas & Themes process, all ideas in Idea Conversations were reviewed by the Product Team. Any Idea that was associated with an identified theme was moved to the new Idea & Themes space. Any Idea that was not part of the move is being marked as Archived. This will preserve the history of the conversations while also letting Community members know that Instructure will not explore the request at this time.