Forum Discussion
Icons on buttons not clickable
Hi everyone,
I'm newer to Storyline and am experiencing an issue where I do the following (issue is last):
- I create a clickable button by first adding a rectangle shape (button) to my slide
- I what the button to have an icon instead of text, so I place an icon over the rectangle
- Issue: When I make the rectangle clickable (takes user to the next slide), the icon will not also become clickable. This is confusing, as user might think button is broken if they're hovering over the icon instead of other areas of the rectangle
I've tried a few things, like also setting up a trigger for clicking on the icon to go to the next slide. It doesn't seem to help overall. I'm sure there's got to be a simple solution I just haven't thought to try yet. Attaching example here! Thank you in advance.
Hi Leanna, and welcome to Storyline development! (It's awesome :) )
The good news is that there is indeed an easy solution here.
Select both your rectangle and icon, now right click and select GROUP.
You can now apply your trigger to the Group, not the rectangle, and boom! Working button even over the icon.
Snazzy ;)
I knew it was going to be an easy solution 😅😅
THANK YOU!
Make sure you are layering the objects correctly. If you want to have the icon be on top, then it should be above the rectangle in the timeline.
Even though the rectangle is "below" or behind the icon, it's still larger than the icon. So your users may be clicking the rectangle but thinking that they are clicking the icon. To remedy this, you could group them and then put a hotspot over the group. (That's probably the easiest fix for your desired outcome.)
In your story, I'm not sure what you want the user to actually click; the hover state that causes the subsequent topics to appear works, but they disappear much too quickly for someone to click on them. So you may consider changing the trigger to "when the user hovers" but unchecking the "hide layer when the user hovers out" button. Then click the topic to go to the desired slide.
I suggest you insert the icon into the rectangle while editing the rectangle's states. That will give you one object to click. (Groups often misbehave when triggers are added, especially if you want to use built-in states.)
Here's more info: https://community.articulate.com/discussions/articulate-storyline/tip-making-icons-easier-to-program-and-easier-to-click
"Groups often misbehave when triggers are added."?
In 10 years of Storyline development, I've never experienced that.
States on the other hand are notorious for being unwieldy and badly managed; I avoid them if at all possible.
Andrew, I guess we've had different experiences and encountered different posts on the Forum. 🤷♀️
I'll try to clarify my "Groups often misbehave when triggers are added, especially if you want to use built-in states" comment.
I've seen a lot of Group-related problems in the Forum. Most often, the posts are by folks who want to use the Selected and/or Visited states to indicate what has been clicked. But, of course, a Group can't have states. So they add triggers to ensure that all the states will change. However, triggers often cause problems when they duplicate what happens automatically with built-in states.
So the problem isn't with triggers such as "jump to" or "show layer" that are supposed to run when a Group is clicked. Those work as expected.
The potential problem comes from trying to ensure that all the objects in a Group will change to the appropriate states. Fortunately, how the Group's items automatically change to built-in states has improved over the years. But the last time I checked (admittedly, a few years ago), all the objects in a Group didn't automatically change exactly how one object does.
Plus, I guess I just like having fewer items in the Timeline.
Well, one of the great things about Storyline is that there are different ways to accomplish the same things. My motto? Do what works for you as the developer—as long as it works for the end user. 😁
I use groups a lot (I didn't used to but find it easier to manage things now, funny how things change), I don't see anything misbehave apart from hover states and shadows, but at least for hover states there is a workaround .
