eLBX Online 2021 | June 22 - 24


Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!
CHECK IT OUT

How to Create a Rollover List

kevinelmore
kevinelmore Community Member Posts: 162
In some cases, you may want to present the learner with a collection of objectives, terms, or any other list, but you want to reduce clutter on the screen by showing descriptions of each list item as the learner hovers his mouse over it. You can do this with rollover effects. This tip demonstrates how a quick-and-dirty method for creating a rollover effect for lists.ComponentsFor this tip, we will assume you have the following objects (or can create them):List Item 1 – This is a text or graphic that is in the list (such as a term).List Item 2 – This is also a text or graphic.Hotspot 1 – This is a transparent button that is on top of List Item 1.Hotspot 2 – This is a transparent button that is on top of List Item 2.Text Box 1 – This is a text (or possible a graphic) that describes List Item 1. It is initially not visible.Text Box 2 – This is a text (or possible a graphic) that describes List Item 2. It is initially not visible.Create an Action Group to Hide DescriptionsFirst, create an action group called Hide Text Boxes Action Group. Create the following actions within the group:Action Name: Hide Text Box 1Action: HideTarget: Text Box 1Action Name: Hide Text Box 2Action: HideTarget: Text Box 2Assign a Mouse Enter commandNext, you want to define an action to fire when the mouse enters Hotspot 1, which is currently on top of List Item 1. Assign an action to Hotspot 1, and define it as such:Action Name: Show Text Box 1On: Mouse EnterAction: ShowTarget: Text Box 1Perform the same task for Hotspot 2, but use Text Box 2.Assign a Mouse Exit commandFinally, you want to hide the text box when the learner is done with the definition. Assign an action to Hotspot 1, and define it as such:Action Name: Hide All Text BoxesOn: Mouse ExitAction: Run Action GroupTarget: Hide Text Boxes Action GroupResultThe end result is that your two list items now have descriptions that show up when the learner mouses over them. To save clutter, each description vanishes when the learner is moves away from the list item.VariationsNumber of Items: This tip is too complex for only two items. It is assumed that you have several items to demonstrate. If you only have two items, instead of relying on action groups, you may consider adding a Hide action when the mouse enters List Item 1 so that it hides Text Box 2.Using Images for List Items: If your list items are images, then you don’t even need the Hotspot buttons. Just assign the Mouse Enter and Mouse Exit actions to the images. Text boxes cannot have these actions, so if you are using text, then you need to overlay a transparent button on them.List Items Are Too Close Together: This tip assumes that there is sufficient space between the list items so that the Mouse Exit action triggers with no conflict with the Mouse Enter action. If there is a conflict, you may want to run the action group when the Mouse Enter action fires (but make sure it happens before you want to show the Text Box).
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!