Masking shapes and images in Axure 9

[mbc66]

@MrsB

Do you know how to make it still draggable if there’s a semi-transparent graphic on top of the dynamic panel in the layers?

Not sure exactly what you mean… Are you saying you have a draggable dynamic panel and in front of that there is an image widget–which is blocking the dynamic panel? If so, does that image have any interactions, or is it just for looks? Or does it maybe get moved in front sometimes? Dealing with this really depends on how your prototype is set up, what the widgets are, what they all do, etc. If you could upload your .rp file it would help immensely, not only for users (like me) to understand what you are doing, but also to test and demonstrate solutions rather than general guidelines or vague guesses.

That said, here are the generalities and guesses… A few different approaches you could take, depending on your structure, if this prototype will be used on mobile or touch-only devices, etc. Try only one at a time until one works…

• Place the overlaying image inside the draggable dynamic panel and send it to front (within that dynamic panel) so that it is still overlaid but does not block the dynamic panel. If this image is smaller than the dynamic panel that should work well. If larger, then you may need to create a nested dynamic panel and use some Cases in the Drag event to test if the cursor is over the area of your original draggable panel.
• Create a Mouse Over event on the image with an action to bring your dynamic panel to front, thus making it accessible. Alternatively, send “This” to back, meaning the image sends itself to back when the mouse cursor is over it. Then, in the dynamic panel’s Drag Stopped event, make an action to bring the image to front again.
• Create a dynamic panel from your semi-transparent image. In its Dragged event, use the Fire Event action to call the original dynamic panel’s Dragged event. In other words, dragging on the image would trigger the drag for the dynamic panel. (I’m guessing at this one…have not tried it yet.)
• Use a hack to inject CSS and make your image widget non-interactive. See this thread for details. You can either inject it as @Gregor did (not supported by Axure) or create a CSS plugin on Axure Cloud (if you publish your prototype to Axure Cloud.) Actually, I’ve not tested this in RP9 yet, but it should still work.

Make object linkable even if it's covered

Several years ago the legendary Gregor posted some nice demos of javascript hacks and one of them achieved just this. Actually, it utilized CSS {pointer-events: none} by calling it through javascript injection. It tells the browser to essentially ignore a widget as if it were not there, thus passing events (like OnClick) to widgets underneath it. It was originally done in RP7, updated for RP8, but should still work (hopefully) in RP9. I can’t find the threads in the forum and they would probably…

@MrsB

Like pinning the interaction to the top?

I don’t understand… do you need to pin the image to the top of the page or the draggable panel? Again, if you can reply and upload your .rp file it really helps users help you much better. Thanks!