Skip to main content
Pragadesh Leo
Known Participant
August 26, 2020
Answered

Issue while using Image Rollover using Button states

  • August 26, 2020
  • 1 reply
  • 1478 views

I'm trying to create a Roll over image effect without using the widget. So i tried using the button - A shape converted/used as button and modified the Rollover state (placed a desired image on roll over state).

Removed the Down state.

Action - Changed to "No Action".

Still there is an issue after publishing.

The hover effect happens successfully but when clicked on the button, the image flickers (The rollover image either goes off or on when clicked on the button).

Can anyone help me resolve this issue?

    This topic has been closed for replies.
    Correct answer Lilybiri

    I already told in a previous answer that this mentioning by the HTML tracker is NOT correct. But apparently you didn't read that answer fully. Based on my experience there are only two reasons why you would want to replace a Rollover Image by a rollover state:

    1. If you are creating a responsive project with Fluid Boxes, to offer that functionality to those users who are on a desktop or laptop where the Hover event is available.  Reason: the Rollover image (and Caption) is unavailable in a Fluid Boxes project, options are dimmed.
    2. If you want to show more than just an image or a caption, sort of a minimized replacement of the Rollover slidelet which is indeed never allowed for HTML output. In a Rollover state you can add multiple objects.

    As for your flickering issue: AFAIK it is not possible to click a button without hovering over it, which explains the short appearance of the rollover image. You cannot avoid that, deleting the Down state doesn't help. Cheat on the learner: why would he click that button? Maybe because you left the Hand cursor?

    If you want a perfect solution you need to create events: Rollover but also Rollout. That means either using the CpExtra widget which allows the creation of events, or using JavaScript.

     

    Repeating: is this not totally unnecessary? Why not simple use the Rollover Image in a non-responsive project since the result is exactly the same: will appear only on laptop/desktop and you seem not to need multiple objects to appear on Rollover.

    1 reply

    Lilybiri
    Legend
    August 26, 2020

    Rollover images can still be used in non-responsive projects but they will only appear on devices like desktop/laptop which have a 'hover' event. They will not be visible on mobile devices. That is the reason why you cannot insert a Rollover image when creating a responsive project with Fluid Boxes.

    Did you see this blog about mimicking Rollover in Fluid Boxes?

    http://blog.lilybiri.com/rollover-in-fluid-boxes

    BTW Rollover image is NOT a widget, it is just an object.

    Pragadesh Leo
    Known Participant
    August 26, 2020

    Hi mam, 

    Thank you for the quick response. 

    We don't want to use Rollover image for the below reason(attached image below).

    So, as an alternative im using a button/shape and using its rollover state for the same functionality. But, Why am i getting the issue - when clicked on the button, the image flickers (The rollover image either goes off or on when clicked on the button).

    I have used button/shapes for the Roll over image alternative earlier. I have not experienced this issue. It was just showing the hover effect alone, the click action/down effect was not showing. But this is a trouble now.

    RodWard
    Community Expert
    Community Expert
    August 27, 2020

    That warning message will always appear when using rollover objects now because it is just warning you about the fact that touch screen mobile device users will not be navigating with a mouse so the rollovers won't be useful.  You can ignore this message if your users will primarily be desktop computer users.

     

    Regarding the issue where the rollover image moves on rollover, check the object's State View and you will probably be able to see the problem.  Right click on the rollover state and choose Reset State from the context menu.