Garden Gnome Software

Hi folks,

I have a few hotspots close to each other, and they overlap when selected or in overlay. I found that z-index is controlled by CSS but I'm not sure which layer should contain the style. I tried different options, with the CSS in each of the layers or adding an Action with the z-index with not much success. I have attached some screen captures.

Does anyone know how this works?
Thanks!

Hi,
In this example we are going to change the z-index of the ht_info point Hotspot Template.
All the popup elements are a child of the Hotspot Template, ht_info.
Set the z-index of the template to -1.

The button that opens the info text box will also have the action:
Source: Mouse Click
Action: Go To URL
URL: javascript:me._ht_info.style.zIndex='0';
Target, leave blank
This brings the z-index for this one hotspot from -1 to 0, so its above all others.

The close button needs a similar action but this time the z-index ='-1'.
Regards,

Thank you Hopki,

It works at the beginning but after clicking in different hotspots it overlaps again. Attached are some screen captures and a screen video.

I'm sure I've missed some step

Here is the video

I was checking again your steps and I wondered if it is the close button the element that reverses the state to -1.

How can I make it without it? So I click again on the icon it goes back to -1?

Hi,
The way to solve this is to use a trigger click action.
Open the attached project, the element info_dot has the actions to open the info popup.
The element ht_info_close has the actions to close it, as well as the info_text, so this can also be clicked to close the popup.
You will see in the element info_dot that there is a Mouse Click, Trigger Click action targeting the ht_info_close.
This is at the top of the action list, actions get triggered starting from the top and work down.
For this action to target all instances, so all point hotspots it proceeds the action with a pond sign, #.

So when clicking the info_dot element it first closes all info point hotspots, sending them all to z-index -1.
Then sets the variable and then sets the z-index for that one to 0.
Regards,

Thank you so much Hopki, now is working