Intro

A type of objects that is mentioned by the HTML tracker for non-responsive projects, is the rollover type: rollover caption, rollover image, rollover slidelet, rollover shape. However if you ignore that warning in such a  project, the rolloverrs will work fine when used with a mouse on a desktop or laptop screen (with the exception or the slidelet, which you should avoid at all times). However even when using a stylus, those rollovers will not appear on mobile screens.

However when creating a responsive project using Fluid Boxes, the options for inserting a rollover are greyed out, there is no way to add them. Is there a workaround to have rollovers for desktop/laptop users? This question appears once in a while all over social media/forums. In this post you’ll see how a rollover could be mimicked, and how to deal with them.

Example Movie

I cannot insert a responsive movie in a blog post. Use this link to have access to it. Try it out on a laptop or desktop screen: roll over the buttons in the left and in the right most Fluid box. You’ll see rollovers for the big Blue buttons which do not have a real button functionality. The red buttons on the right are active, a hint message appears when rolling over the buttons. You can click those red buttons. This is a static screenshot of that slide (which appears after the poster image and the first slide):

If you try this on a tablet or a smartphone, rollovers will not appear. I tested on iPad and on an Android (HTC) phone.

First Mimick: Hint Messages

You did see the Hint messages for the red buttons when hovering over them. If you use a tablet or a phone they will not show up. Those buttons have the InBuilt States ‘Rollover’ and ‘Down’, but only the Down state will be visible on those mobile devices. This is the Object state panel for the second button:

For interactive objects it is possible to check the option ‘Hint message’ in the Actions tab. In all themes included with Captivate those messages are no longer in a caption but in a shape. The hint message appears wh

There are some problems with this solution:

• Buttons and Hint messages will share the real estate in the (normal) Fluid Box.

  

  That is a waste of space especially for mobile screens where those hints never appear. and the buttons may shrink too much as you can see here:

  

• I tried to use a static fluid box for each button+hint to be able to stack the Hint message over the button but that leads to very ugly flickering and is excluded.
• You don’t have control over the exact size of the buttons, and certainly not over the HInt messages (look at the screenshots above). This may be not so important since you’ll only watch on a big screen, but nevertheless.

Second Mimick: Rollover State

With the blue shape buttons I demonstrated that you can fill the Rollover state with Text (mimicking a rollover caption), with an image (mimicking a Rollover Image) and with both. Here is a screenshot of the second shape button, having an image and text:

The effect is quite nice, provided you use rather big shape buttons as was the case here:

There is a possible problem when using images: they can be distorted if the option ‘Maintain Aspect ratio’ is unchecked. That was the case in the example, and can lead to distortion:

Shared Action for Red buttons

The active red buttons trigger a shared action which will change the state of a shape (showing explanations), add a star to a progress indicator and have it animated. If you have read blog posts written by me, you know that I am a big fan of Shared Actions.