Issue while using Image Rollover using Button states

[Pragadesh Leo]

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?

[Lilybiri]

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]

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]

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.

[Pragadesh Leo]

Hi RodWard,

Thank you for your response. 

I can explain my scenario elaborately.

Right now i'm using a shape as a button and its Rollover state for an alternative rollover image functionality.

The QA has raised an issue, that the rollover action is working when mouse cursor is rolled over the button but when clicked on the same the image flickers or it goes off from rollover state.

Can we be able to fix it?

[RodWard]

The Rollover state will ONLY be visible during mouseover.  So if you need that image to be visible AFTER the button is clicked then you need to create another custom Object State (e.g. name it Selected) and set the action of the button to move to that State.  Then that image will remain visible.

[Lilybiri · Accepted solution]

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.

[alisajjad14]

Hi, I hope you are doing well, I am very thankful to you for this useful information. I highly appreciate your work and am very thankful to you for giving time to us.

[Lilybiri]

You're welcome!

[alisajjad14]

Having some issues and don't know how to solve them Is there anyone who can guide me? And very much thank to you again. How can any person guide me or do I think that Google can help me in this issue?

[RodWard]

This thread dates from 2020. If your issue is related to the same problem as the original poster, please provide more information about the problem with button states.

However, if your issue is something different, please create a new thread with a more appropriate title and provide your detailed information there so that others can later find the solution (when someone provides an answer).

[Lilybiri]

You may try ChatGPT... (BingChat often uses my blog posts as one of the resources).

Indeed, I would like to see the exact version number you are using at this moment. The difference in features between version 12 and all the previous versions is so important that one answer can never be correct for both. You find the full version number under Help, About Captivate.

Meanwhile, have a look at this blog post (not valid for version 12):

https://blog.lilybiri.com/button-states-basics-and-tips