text rollover

Aug 04, 2013

(I have a feeling this question & its answer exist somewhere in this forum, but, my search for it has been unlucky.)

We want to provide rollover text definitions.

For now I've created a hotspot that goes to another layer. I can't use a marker because it gets in the way of other text on the screen. I very much prefer the marker model to showing another layer for a definition.

Is there a better way to create text rollovers?

35 Replies
Kelly Kremin

Hover state looks like the way to go. Thank you!

Of course, I can't find Hover State on the Insert menu. And, searching through the forums for create /insert hover state - like most searches through the forums - is crowded with all sorts of stuff that is close but not spot on.

So, how does one insert a hover state?

Ashley Terwilliger-Pollard

Hi Primie,

Have you looked at the built in states associated with buttons and the characters?

If the buttons are on your base layer, and then the layers will be where the narration, description and character changes - you'll need to add a "show layer" trigger to each button.

If you're having difficulty getting started with this, maybe you could share a sample .story file that you're working on so we could take a look at what you have set up?

Ashley Terwilliger-Pollard

Hi Corey,

You can make a custom hover state for any images you have on your slide that when the user hovers over them - it can change the current image, or show more information. It's just as Mike described, and here is a very simple .story file (from SL2) doing just what you mentioned. 

If I'm not understanding what you'd like to set up could you share a bit more information or a sample .story file? 

Corey Klein

That's exactly what I want to do, Ashley.  I have a slide that I imported from a ppt with four pictures of keys already in it.  I want every key to have a rollover that brings up a line of text about each of them.  Not to be a pain, but is there any way you can lay out the steps needed to accomplish that for me?  Thanks so much!  : )


Ashley Terwilliger-Pollard

Hi Corey,

Sure -

  1. I inserted the image of the key (random clip art)
  2. I clicked on the image and then on the states tabs in very bottom next to the timeline
  3. Choose to edit state
  4. Duplicated the "normal" state and created a new state using the built in name of hover
  5. Once editing the hover state, I add my text box and accompanying text and save changes to the state
  6. If you preview the slide, the hover state behaves as a pre-defined state and you can see the definitions of the information here. 
  7. Once you've got one set up, you could duplicate the image and then go about changing the images and text as needed - but it would carry over at least the hover state. The video from Mike Enders (the first one previously linked) walks through what that would look like. 

Hope that helps. Here's a general tutorial on how to work with states and edit them. 

Corey Klein

Thanks very for your time on this, Ashley.  I followed your instructions and was able to accomplish it.  Yay!  I've documented the steps I took for future reference.  There were a few, small, additional steps that had to be performed to get it to work just right.  I've listed the whole process that I performed here for your review / reference...

Insert or click on the image that you want to be the rollover

The image should then also appear at the bottom of the screen (when the "States" tab is highlighted or clicked)

Click on "EDIT STATES"

Click the "Duplicate State" icon

An "Add" window will pop up

Use the drop down arrow and select "Hover"

Click "Add" and a new picture called "Hover" will appear in the "States" area below (to the right of the "Normal" box)

Insert your text box [for the rollover info to appear in] on-screen

Type in your desired text (adjusting your font style and size as you wish)

Position the text box appropriately on-screen


Repeat as many times as needed on the slide

If you have to go back and edit the rollover text or position, click on the image, click "EDIT STATES", click on the "Hover" box within the "States" field at the bottom of the page, make your revisions, and click "DONE EDITING STATES"

Review via the "Preview"

Time the appearance of the rollover image to match your narration


Let me know if there's anything I missed, Ashley, or if there's anything to tweak in this rollover creation process.

Thanks again,


Indrani Sen

Hi Ashley,

I am working on creating a simple click on interaction which I could so easily do with Flash.  I am sure I am missing on something.  Please could you help me out.

  1. I have 3 items on a clipboard.  initial inetreaction
  2. When users click on each item, a text box shows up on the right of the clipboard.


  1. I tried with states (hover and down), and it works great.
  2. button
  3. When  I add a button interaction-it works fine.  However there are 3 items (to be clicked).  It appears that after the last item, the custom click on does not work.  I understand the problem, but cannot figure out how to fix it.

final screen

The problems are:

  1. After clicking the the'Go packaging' button, I cannot view the 'Ingredient list' and 'In-house serviceware' ietms.  I know they are shown, but they are obstructed by the last item. Also the visited state (which is a green ticked item) is not shown. 
  2. I will try to insert the original files as well.  To replicate this problem, please click on the first tab, as shown in the image.ineterface


Any help will be appreciated.


Thank you







Alyssa Gomez

Hi Indrani! I love the way you designed this slide! And you were so close with your trigger set up - only one small change is needed.

For each item on the clip board, you need 3 triggers: one trigger to change the clicked object to the Down state (which you already had), and two triggers to change the other two objects to the Normal state. 

Take a look at the attached file, and let me know if this works for you!

Indrani Sen

Thank you, Alyssa.

Really nice way of programming. Although I was not able to open the file, I read through your instructions, and was able to make these changes..

Just one request. Is there any 'if & else' statements or anything else I can do to show the ticked visited links?

Please let me know.

Thanks again for your help.



Leslie McKerchie

Hi Indrani! You mention not being able to see the file that Alyssa has shared here in the forums. Please be sure to click 'View' in the e-mail notification that you get so that you are directed to the thread. You should be able to see her file share above. Just let us know if you have any further questions after reviewing her file.

If the issue is with not downloading the file, please try a different browser as some users have reported having issues with files showing as a .zip file when a .story file is being shared.

This discussion is closed. You can start a new discussion or contact Articulate Support.