Rollover triggers
Apr 28, 2015
By
David Baxter
I'm trying to build an infographic with multiple rollover triggers. On page entry I want one of the trigger states to be active (one column of ten will be displayed in hover state with associated product image and description - and the other nine will be inactive). I want then that initial hover state column and image to change back to an inactive state when the user rolls the cursor over any other of the nine hotspots. Is there any way to do this programmatically (rather then having to define in each of the ten rollovers to change the state of the other nine to inactive when rolled over)?
15 Replies
Hi David, can you elaborate little more please? How many states currently you are using? and how many triggers you have applied? Also if you share the storyfile then it will be really helpful.
Thanks Ravindra.
It is a product table matrix with ten columns. When you roll over a column it turns gray, two other indicators turn orange, and the product image and description appear above the table.
The table column and indicators have two states each (normal and hover) and the product images and descriptions each have two states (normal and hidden). I'm trying to have the initial state of the first product image and description (leftmost in the matrix) to be "visible", and the first table column and indicators to be "hover" on page entry so that the user understands the UI.
When the user rolls over any other table column, the state of the first product/description and column/indicators should revert to "hidden" and "normal" respectively, and the state of the product/description and column/indicators for the "any other" column will change to "normal" and "hover" respectively.
I hope that makes sense. I'm sorry that I cannot attach the file.
I'm basically trying to reproduce this interaction: http://www.nytimes.com/ref/business/20070715_GILDED_GRAPHIC.html#
Hi David,
Is this close to what you are looking for?
Thanks, Cary. That's almost it . . . On page entry I'm trying to get the first column and text block to be active (visible). Then when the user hovers over any other column the first column and text block will revert to "disabled" state. I've got to believe there's some variable that I could assign to the first column/textblock (e.g., if mouse over hotspot 2-10 then change state of column1/text block to "disabled")?
You could set up a Trigger, David. And it could say "Change state of column1 to disabled when mouse hovered over column1".
Just add a trigger to the main layer that says:
Action: Show Layer
Layer: Layer 1
When: Timeline Starts
Object: 1.1 Untitled Slide
There are other ways to do this, but this should work.
Hey David - Just wanted to let you know that this thread inspires my latest download. You can check it out here: Storyline 2: Interactive Timeline.
Thanks for the reply Nicole. What I actually need is a way for the first column (active on page entry) to go inactive when the user rolls over any other column 2-10.
Thanks, Nicole. This is exactly what I'm trying to do . . .but I'd like to have the first employee (e.g., in your example) to be visible on page entry, and then when the user rolls over any other employee, the first one becomes hidden and the next one becomes visible.
Do you want it so that the person can never see the original layer again or can they hover over column 1 again to see that info?
How about the attached solution David? It's the same file I posted as a download, but in this case you'll see that I added a trigger so Layer 1 is visible right away when the file is started, and then I added a hotspot over top of the other items on the timeline on Layer1, with a trigger that will hide Layer 1 when users hover the Hospot. This should solve the problem?
Aha! That's it, Nicole! Thanks also for the help, Cary.
Hi David,
The NY Times Wealthiest Americans timeline interaction is the VERY first thing I built in Storyline 1 during the early beta days. I was trying to break Storyline. :)
Aside from a few subtle animations, you can replicate that interaction almost perfectly.
Here's the version I built a few years ago: https://s3.amazonaws.com/DEMOS/wealthiest-americans/story.html
Wow! That's a blast from the past, Kevin. We all had a lot of fun over that SL1 beta summer:-)
This discussion is closed. You can start a new discussion or contact Articulate Support.