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!
Increasing the clickable are of button
- Hopki
- Gnome
- Posts: 13029
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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.
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,
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.
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,
- Attachments
-
- ClickArea.zip
- (30.71 KiB) Downloaded 147 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/