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

Stateview and Click area on SVG is not working as expected

Participant ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

Hi,

We are using captivate 2019. Nonresponsive project. I wrote a similiar forum a while back but didnot get a solution.

We have some svg images we are using as buttons with rollover and down states.

The issue we are facing is inconsistant. Some of the image buttons only have certain areas that will respond to rollover and clicking. It depends on where your mouse is on the object. 

Others on the same slide are behaving as expected: mouse over anywhere on the image the rollover takes over and anywhere on the image you can get a clickable area.

Views

42

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 ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

Maybe I am asking the same questions again.  Please give the exact version number as you can find under Help, About Captivate. The common name CP2019 had so many releases, that first need is to be sure you are on the most recent of the three main versions 11.0, 11.5 or 11.8.

I use SVG buttons a lot. It is the only button which allows having the clickable area limited to the image instead of the bounding box. It also allows to expand that area beyond the physical bounding box. Not sure how you set up those buttons.

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
Participant ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

2019, 11.5

 

The buttons were dragged on to the screen, grouped with a smart object and grouped with it. The SVG was then set to be used as a button, action assigned to go to another slide and the staes were adjusted for rollover and down positions. I dont think I missed anything else unless you ask about how it was set up.

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
Participant ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

danielb51742821_0-1654789551348.png

danielb51742821_1-1654789586562.png

 

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 ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

Please do not use grouping when SVG or bitmap images used as buttons are included in the group.  It may be the origin of your problem.

Why not define the square shape as button, add the text to that shape (align to the bottom) and add the SVG to the Normal, Rollover and Down state.  That would have multiple advantages:

  1. Learner can use the full shape as clickable area.
  2. You define an object style for that shape button
  3. You can easily replace text and SVG for the other buttons
  4. You don't need groups
  5. You will have less objects..

 

I may miss some advantages and see no disadvantages at this moment.

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
Participant ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

I'm sorry, I found my error, I think/hope.

I had a hidden object over the area of the icons affected. It was not necessary to be there. On removal, I now have full expectations. Perhaps I had a similiar issue when I wrote something on this topic in the far past.

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 ,
Jun 09, 2022 Jun 09, 2022

Copy link to clipboard

Copied

LATEST

I suspected something like that. But please, read my previous comment carefully. Whenever possible I will always put the interactive objects on top of the timeline stack (z-order) as well. Although an interactive object can remain interactive even when covered up with a static object, I am not that sure for the last button types which are the SVGs or Bitmap images directly used as buttons. It is worthwhile to try out my proposal with the change to shape buttons. It is a pity that you cannot use SVGs as fill for shape buttons, but they can always be added in states. I am finishing up a blog post about states for buttons, because quite a few issues I tried to help with here were based on a lack of understanding of those states.

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