Skip to main content
S
SebastienV
Known Participant
April 3, 2024
Question

SVG buttons clickable area with overlaping objects in custom states

  • April 3, 2024
  • 1 reply
  • 742 views

Hi,

I'm stuck with this problem and I can't really work out whether I'm trying to do something impossible or whether I'm just setting it up wrong. Perhaps you'll have some advice to clarify things?

I use a lot of SVG buttons for which I define custom states to which I add other design elements. As long as these design elements don't overlay the clickable area, everything's fine. But if they overlap the clickable zone, whether they're placed in front or behind it, I get interference with the clickable zone.

 

So is there a way to preserve the clickable area while having other objects superimposed (whether smartshapes as in the example below or other imported SVGs)?
I'm using Captivate 11.8 with fixed layout project.

 

    This topic has been closed for replies.

    1 reply

    Lilybiri
    Lilybiri
    Legend
    April 3, 2024

    Term used in Captivate is 'non-responsive' project, because it doesn't need to be a fixed layout; you can still publish as scalable HTML.

    Still on that buggy 11.8 release? That is a pity.

    It used to be different in the past, but an interactive object will remain interactive even if it is covered with a non-interactive object. If you want to  take out the interactivity of that first object, you need to disable it which is easily done with an advanced or a shared action. I don't know exactly what you want to achieve here?

    The SVG used as button is the only possible button which allows to restrict its clickable area to the image itself, all other button types have the surrounding bounding box as clickable area. More in:

    https://blog.lilybiri.com/overvew-6-button-types

     

    S
    SebastienVAuthor
    Known Participant
    April 4, 2024

    "Still on that buggy 11.8 release? That is a pity." --> Unfortunately, yes. And well noted for the 'non-responsive' 😉

    For the SVG buttons, the goal is just to have a simple button with normal behaviour. 

    This one is just a simple one as example, others are more 'designed'. My imported SVG is just use as a design background and I'm adding the smartshape in the custom states to put the text. But when I'm building this like that I have a buggy behaviour. When I click exactly on the text (see screen record) the button 'react' but doesn't fire the action. When I click directly on the SVG part of the button (not on letters), the button reacts correctly and fire the action to change the state of the button.

    It seems that the smartshape with the text interfere in a way or another with the button.

    Lilybiri
    Lilybiri
    Legend
    April 4, 2024

    I learned to avoid stacking objects like you did here. Use a shape button (my favourite) to achieve the design you want. It is the most versatile button and is originally a vector image. Too bad that the never allowed to create shapes as a roundtripping with Illustrator. If you have time to look at the blog about the buttons, scroll till the end for 'my favourites'. You can even use the circular shape for your custom radio buttons. 

    Careful when you start with quizzes, I fear you'll get problems if you don't know exactly how quizzes work in Captivate, its limitations and possibilities. 90% of my consultancy jobs were linked to quiz problem solving.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices