• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Issue while using Image Rollover using Button states

Explorer ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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?

Views

123

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 27, 2020 Aug 27, 2020

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 B
...

Likes

Translate

Translate
Community Expert ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

Hi mam, 

Thank you for the quick response. 

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

Issue Using Rollover image.png

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 26, 2020 Aug 26, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 27, 2020 Aug 27, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines