Interaction with shapes


#1

Hi people!

I’m trying to do a mouse-over effect on a triangle, but the interaction extends to the entire rectangular (green) frame of the shape, not just the triangle itself. In other words, I want the triangle to change color when the mouse hovers over, but right now the effect also takes place in the entire green frame, not just the triangle. Is there anyway to avoid this?

Best,

SH


#2

Not sure what kind of shape you’re using but it looks like you’re trying to create a mouse over on a slice of pie. I recreated your shape using Axure’s Pie Chart widget and the pen tool and added mouse over interactions with only the pie changing. If this is an image then just change the image on mouse over.

I’ve attached my RP file so you can take a look.

Shapes.rp (47.1 KB)


#3

Hi KavaKiwi and thanks for the answer,

I also tried using Axure’s Pie Chart, but even in your workfile, the shape changes on a mouse-over outside the triangular shape itself (but only within the “frame” of the shape).


#4

Can you attach your RP file so I can take a look? Because I’m not sure I understand the issue.


#5

Sure. I’m having trouble explaining it, my bad. As you might notice in my file, each interaction acts according to the rectangular (X & Y) frame of the shape instead of the actual pie-shape.

shapeinteraction.rp (55.4 KB)


#6

Ah I see the problem. Yeah, I don’t know of an easy way to solve this. You could create multiple hotspots in the pie shape and then group them together and add mouse-enter and mouse-out actions to change the mouseover state of your pies. But that is a serious pain in the butt and probably not even worth the effort.


#7

Hi shandyhimmel and KavaKiwi,

Just jumping in here to say that we have seen some requests for the boundaries of custom shapes to be determined by the actual shape instead of the bounding box. I’ll go ahead and let our product team know that there’s more interest in this feature.

Please let us know if you have any questions or if there’s anything else we can assist you with!


#8

Want! Thanks for considering it. :slight_smile:


#9

Really, really need this - especially when trying to prototype interactive data-viz elements.


#10

agreed, been in a real need for this either! thank you guys for sharing it all. might i ask you questions, here or privately, if i would have some? thanks again!


#11

Hi there. Has there been any update on this topic/feature? I’m pulling whats left of my hair out trying to show this interaction in my wireframes.


#12

Hello- no updates on changing the bounding box yet, I’m afraid. We’re still going to evaluate this for a future release though, and we’re continuing to review feedback.


#13

+1 for interaction bounding boxes that reflect their shapes. I don’t see how you can create any sort of image map or interactive pie chart successfully without this (you end up with a lot of overlapping bounding boxes).


#14

+1 here as well. Without this feature, creating geographic maps in Axure is essentially impossible. It’s a shame too, because the complex shapes copy well as SVGs from Illustrator to Axure, but they are then given a rectangular bounding box even when converted to a native shape.


#15

Another +1 for this. It would be mega useful