Increasing the clickable are of button

[NicFlemmer123]

Hi Hopki,

Could please assist. I would like to increase the clickable area of a button ( please see thinklabgroup.com/greenfields_vt enter the rooms hotspot and try the buttons). The user says that they need to click the button in a specific place for it to trigger.

Thanks!

[Hopki]

Hi,
You can simply use a rectangle to do this.
As an example a normal point hotspot would comprise of a Hotspot Template, then the Hotspot Image as a child element.
The Hotspot Image would be the clickable area.

What you can do is add a rectangle as a child element of the Hotspot Template, , deselect border and background and this will become the new clickable area.
To finish off you can make the Hotspot Image/s permeable.


The attached example uses the Node Hotspot Silhouette component.

How:
Once added to skin editor open the components tree so you can see all the sub-elements.
Tidy up your view by hiding the ht_node_CustomImage, tt_ht_node and hotspot_preview in the tree.

Screenshot 2020-09-16 at 09.19.56.png (58.75 KiB) Viewed 1548 times

Add the rectangle, click area and make it a child of the Hotspot Template, ht_node.
Centre the rectangle by select the centre anchor point and setting position to X/Y, to 0/0.
Set the size of the clickable area by changing the size of the rectangle, I'm using 64px/64px making twice as large.
Select the Hand Cursor, deselect the background and deselect the border by setting the width to 0 and finally set the Radius to 999 which makes it a circle.

Now select the Hotspot Images, ht_node_image and ht_node_visited and make them Permeable so they are not active/clickable.
That's it, done.

The click area is now the rectangle, click area which you can change the size in the skin, or...
Use a logic block to dynamically change the size depending on node or other triggers.
Regards,

[NicFlemmer123]

Thanks Hopki!