cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Creating a Rollover Image in Canvas

Original Topic Title: Is there any way of creating a roll over image in Canvas?

I am quite new to Canvas and would appreciate any help with creating an image roll over.

Thanks in advance

Message was edited by: Chris Hofer

Tags (4)
5 Replies
Highlighted
Community Coach
Community Coach

Hi anna.selway​...

Can you give us some more detail on what you'd like to do with this roll-over image?  Do you want a different image to appear upon rollover?  Something else?  if you could describe what a use case would be, I think that would be helpful.

Also, just so you know, I'm going to modify the topic title slightly and also tag your posting with keywords so that it is easy for people to search for if they have similar questions.  If the re-named title doesn't reflect what you are asking, just let me know, and we can work to come up with a different title.

Highlighted
Community Coach
Community Coach

anna.selway, were you able to get this to work on your own? If not, the community can help if you provide a bit more information - "Can you give us some more detail on what you'd like to do with this roll-over image?  Do you want a different image to appear upon rollover?  Something else?"

Highlighted
Community Member

Hello sorry about the late reply - I have not been able to solve this.  I was hoping to create a roll over image on a canvas page, so when an image is hovered over another image is shown.  Some example are shown on this page https://css-tricks.com/examples/ImageRolloverIdeas/

Thanks a lot for your help

Highlighted
Community Member

Hi Anna,  Chris and kona@richland.edu

Just wondering if you found out a way to do some kind of image rollover in a canvas page?

This would be incredibly useful for me in creating a module that is more intercative for a class I teach where students look at an image with some labels (A, B, C, D) and then when they roll the mouse over this image a second identical image replaces it only the labels (ABCD) now have the correct terms instead. Kind of like a quick and easy self-test "Do you know what A B and C are?" *quick mouseover reveals answers* "yes! got it"! That kind of thing.

I have tried this general technique Create A Rollover Image Effect (change image on mouseover) | Helplogger but Canvas strips out the code presumably because onmouseover etc. is not recognized.

Does anyone have any other methods or outside of the box workaround ideas that could make this work?

Cheers,

- nathan

Highlighted
Community Member

anna.selway​ and nathan-swailes@uiowa.edu​,

My suggestion would be to use Thinglink.com. It will allow you to upload a background image, and then choose various "hot spot" sections of the image that do something like display text, an image, or a link when hovered over. You can embed these images as an iframe and there's an interesting discussion over at An Interactive Overview​ where (if you read enough comments) you can see how to accomplish this. Another nice thing is that you can change the background image within Thinglink at any time. So you can use a new image and not have to change anything within Canvas.

Labels