Skip to main content
rchil
Known Participant
August 23, 2016
Question

Rollover image button/click

  • August 23, 2016
  • 2 replies
  • 661 views

I have a Rollover image button that shows an image when rolled over. I want to add a button on top of the rollover image button to create a click that will take the user to the next slide. Problem is, when I Publish to HTML5, the rollover image does not work.

I suppose I could add an Advanced Action to the Rollover Image button, but there is no option for that.

Thanks.

    This topic has been closed for replies.

    2 replies

    Allen_Partridge
    Adobe Employee
    Adobe Employee
    August 23, 2016

    Hi Robert,

    Here's a way to do what you're hoping for easily.

    1. Create a smart shape - I generally use the rounded corner rectangle.

    2. Select the "Use as button" option in the property inspector

    3. Click the "state view' button in the property inspector- you'll note that when a smart shape turns into a button it get's three states by default. (You could add more, but for this project you don't need to.)

    4. Select the rollover state thumbnail in the states filmstrip (it's now replaced your project filmstrip.)

    5. Insert the image and position as desired.

    6. Feel free to edit the aesthetics of your button in various states - you can see here I've made them medium, highlighted, and dark to reflect default, over and down states of the button. Note that you can add anything you want in any given state - just select that state thumbnail before you add it.

    7. Once finished, click the big red x in the big button bar to close the state view.

    8. Select your button - which will now appear only as the default state on screen. (Don't worry, your work is still there.) 

    9. Select the Actions panel and assign whatever action you like. I used javascript and added the line 'alert ("hey, that tickles!");' for example. You could go next, openURL etc.

    Screenshot 2016-08-23 20.38.50

    Hope this helps,

    --Allen

    rchil
    rchilAuthor
    Known Participant
    August 23, 2016

    Sounds like the way to go - I'll give it a try - thanks Allen!

    Participating Frequently
    August 23, 2016

    Which version of Captivate are you using?

    If you're using V9 have you tried using object states? I haven't checked yet, but I would have thought that you could add your button to the rollover state of the object.

    rchil
    rchilAuthor
    Known Participant
    August 23, 2016

    Yes, Captivate 9.0.1.320

    The Interaction Menu item is grayed out when I go into the Rollover image's Object state. ARRRGGG!

    Lilybiri
    Legend
    August 23, 2016

    Reponsive design is not supporting rollovers. A button has no rollover

    event, so I am very puzzled about your question. Only the rollover slidelet

    has a rollover event. Or are you talking about a simple rollover image? You

    cannot have an interactive object on top of the rollover area. If you

    explained clearly the goal, maybe could offer some solution.