Rollover triggers

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
David Baxter

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.

 

David Baxter

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")?

 

Nicole Legault

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?

Kevin Thorn

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