I have this single big image with different parts. I would like to add hover text and glow when the student moves his cursor over certain parts. The discussion I read here talks about adding different images and then creating hover states for them. Is it possible to add a single image and add hover states depending on where the cursor is?
For eg. If I have a single picture of the human body, I would like to add hover text and glow when I move my cursor over the different parts such as hands, chest, nose, etc. The catch here being that is just a single image. Thanks.
sorry to say but no this is not possible. If you insert one image you only can set hover states for the whole image. You have to split the image to have a glow on specific parts. I recommend using png with transparent background, so you don´t have a rectengular hover around the splittet images but around (in your example) only the hand.
I just remembered that a long time ago, I did a quick example for another user. It shows a map and rolling over France or Germany shows more info on hover. See here.
Hey, thank you guys for your quick replies. I decided to crop the big image into smaller ones and insert them. It is the long way out and I guess it works fine if your images are all rectangular shaped. I was thinking how we could make it work for non rectangular images, like the example above, parts of the body.
Yeah Michael, I was looking for something like this. Could you post the link to that discussion if possible? I realized it worked for you because the map underneath is white in color. Thanks.
9 Replies
Hi,
sorry to say but no this is not possible. If you insert one image you only can set hover states for the whole image. You have to split the image to have a glow on specific parts. I recommend using png with transparent background, so you don´t have a rectengular hover around the splittet images but around (in your example) only the hand.
You could place transparent Storyline objects over parts of your image and add the text (and any effects like a glow) to these object's hover states.
I just remembered that a long time ago, I did a quick example for another user. It shows a map and rolling over France or Germany shows more info on hover. See here.
Hey, thank you guys for your quick replies. I decided to crop the big image into smaller ones and insert them. It is the long way out and I guess it works fine if your images are all rectangular shaped. I was thinking how we could make it work for non rectangular images, like the example above, parts of the body.
For my example, I used the Storyline freeform drawing tools to create the irregular-shaped areas on the map.
Yeah Michael, I was looking for something like this. Could you post the link to that discussion if possible? I realized it worked for you because the map underneath is white in color. Thanks.
The color of the map doesn't matter, because the shapes that are placed on top are transparent.
Got it, thanks so much. I'll try it out when my shapes are irregular. Have a good one.
See attached the .story file for this example.
This discussion is closed. You can start a new discussion or contact Articulate Support.