I have several screenshot images side-by-side on a slide (to mimic the ribbon in MS Excel). Each screenshot image has a Hover state where the image is enlarged to make it easily visible. However, when I preview the slide and hover my mouse over the screenshot, the enlarged hover image appears behind the other screenshots on the base layer that are beside it. How do I ensure that the Hover state of my object displayed above the base layer objects? Is there a workaround?
Here's an example mock-up using a ribbon within MS Excel as my example (for privacy reason I can't share the actual ribbon images from my in-house software). The idea is that the ribbon itself is the menu of the module. Given how long the ribbon is, the icons may be hard to read so I've added a hover state to all the icons that zooms in and makes the icon legible. Then the user can click on the icon to move to their desired page.
In the attached example, hover your mouse over Pictures, Online Pictures and Shapes to see the problem that the zoomed-in Hover state appears behind the screenshot images of the other icons. Users may hover over the icons randomly. How do I make the hover state images appear above every other image? If this doesn't work, any ideas on how to get the same zoom-in/menu effect with another approach?
I see what you mean. I've had a play with it and think I've solved your problem.
I took the three buttons you'd created and added them to an individual layer, then removed the Hover and Down states from the base layer.
I changed the trigger of the buttons on the base layer to show a corresponding layer when you hover the mouse over each one, and set it to restore on mouse leave.
On each corresponding layer, I set the default state of the button I copied to Hover, and the trigger to navigate to the desired page is on the button within the corresponding layer, rather than the base layer.
Hopefully that makes sense?!
On the face of it, it looks like it's behaving the way you want it to...I don't know if this is the "neatest" solution, nor do I know why the states don't work as you had intended them to (I would've done it the same way).
Yet another work around. Not actually solving the problem that is at hand. Not having a go at Glen, he is doing the best he can with what he has. Articulate is full of glitches and errors. The paying public is basically BETA testing this software. I have the same problem as Tracey but cannot use layers. Can anyone inform me of how to do this, thanks. PS - RANT over, Joe
Thanks for posting here. It seems that in the example shared by Glenn and Tracey above, everything is working as designed in that if object A sits in front of object b, when you hover over object B it'll still be behind object A. Depending on how large all the objects are, you could look at ensuring the "hover" elements are outside the range of object A. I'll defer to the community in regards to other design workarounds that would allow you to have this set up without using layers.
If there is anything else I can assist with, please feel free to let me know.
I am still having a lot of problems with the hovering function. I have about 10 layers on one slide. When I set the hovering trigger on layer 3 to show layer 4 it automatically jumps back to the base layer. How can I fix this??
Can you share a copy of your .story file here so that folks can take a look at your triggers and the behavior you're seeing? You can upload even just that one slide here using the "add attachment" button at the bottom of the reply window.
11 Replies
Hi Tracey
Can you upload an example?
Here's an example mock-up using a ribbon within MS Excel as my example (for privacy reason I can't share the actual ribbon images from my in-house software). The idea is that the ribbon itself is the menu of the module. Given how long the ribbon is, the icons may be hard to read so I've added a hover state to all the icons that zooms in and makes the icon legible. Then the user can click on the icon to move to their desired page.
In the attached example, hover your mouse over Pictures, Online Pictures and Shapes to see the problem that the zoomed-in Hover state appears behind the screenshot images of the other icons. Users may hover over the icons randomly. How do I make the hover state images appear above every other image? If this doesn't work, any ideas on how to get the same zoom-in/menu effect with another approach?
Hi Tracey
I see what you mean. I've had a play with it and think I've solved your problem.
I took the three buttons you'd created and added them to an individual layer, then removed the Hover and Down states from the base layer.
I changed the trigger of the buttons on the base layer to show a corresponding layer when you hover the mouse over each one, and set it to restore on mouse leave.
On each corresponding layer, I set the default state of the button I copied to Hover, and the trigger to navigate to the desired page is on the button within the corresponding layer, rather than the base layer.
Hopefully that makes sense?!
On the face of it, it looks like it's behaving the way you want it to...I don't know if this is the "neatest" solution, nor do I know why the states don't work as you had intended them to (I would've done it the same way).
Hopefully this has helped :)
You did it!! You indeed solved my problem. THANK YOU Glenn! I'm truly grateful for your quick response.
Glad that Glenn was able to assist you here Tracey! Thanks for sharing your update :)
Great! Glad I could help :-)
Yet another work around. Not actually solving the problem that is at hand. Not having a go at Glen, he is doing the best he can with what he has. Articulate is full of glitches and errors. The paying public is basically BETA testing this software. I have the same problem as Tracey but cannot use layers. Can anyone inform me of how to do this, thanks. PS - RANT over, Joe
Hi Joe,
Thanks for posting here. It seems that in the example shared by Glenn and Tracey above, everything is working as designed in that if object A sits in front of object b, when you hover over object B it'll still be behind object A. Depending on how large all the objects are, you could look at ensuring the "hover" elements are outside the range of object A. I'll defer to the community in regards to other design workarounds that would allow you to have this set up without using layers.
If there is anything else I can assist with, please feel free to let me know.
I am still having a lot of problems with the hovering function. I have about 10 layers on one slide. When I set the hovering trigger on layer 3 to show layer 4 it automatically jumps back to the base layer. How can I fix this??
Hi Brian,
Can you share a copy of your .story file here so that folks can take a look at your triggers and the behavior you're seeing? You can upload even just that one slide here using the "add attachment" button at the bottom of the reply window.
Make sure "Restore on mouse leave" is unchecked?
This discussion is closed. You can start a new discussion or contact Articulate Support.