Hi all
I am using 'Lolly Hotspots' (circular ht_nodes which expand and fill with node image on mouse-over). I've added labels that popout but I have several hotspots close together and end up with overlap. I know I can redo the labels so they are above/below the hotspot which would solve this specific example but wondered if there was a way of hiding all other hotspots on mouse-over as I've had a couple of other tours that could benefit from this too, where there are multiple hotspots in close proximity to each other.
Any solution or pointers would be really appreciated!
Thanks,
Dylan.
overlapping hotspots
Hi Dylan,
Here is an example using two Point Hotspots, Hot One and Hot Two, and one Hotspot Template.
When you roll over either hotspot a large title is displayed. Rollover Hot One and the title appears over Hot Two, rollover Hot Two and the title appears under Hot One.
https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
Changing the Z-Index on the circle and popup elements forces the title to always be above the circle
https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
In the skin, the container, cnt_popup, with the title has a z-index of 80, while the circle, rct_circle, has a z-index of 60
Tony
Here is an example using two Point Hotspots, Hot One and Hot Two, and one Hotspot Template.
When you roll over either hotspot a large title is displayed. Rollover Hot One and the title appears over Hot Two, rollover Hot Two and the title appears under Hot One.
https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
Changing the Z-Index on the circle and popup elements forces the title to always be above the circle
https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
In the skin, the container, cnt_popup, with the title has a z-index of 80, while the circle, rct_circle, has a z-index of 60
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi Tony
Thanks for taking the time to reply, especially with such clear screenshots!
Originally I was looking for way to hide all other hotspots when mouse over a specific one, but realised this probably wouldn't be possible when they shared the same hotspot template. I had found another thread in the forum about overlapping hotspots and Z-index was mentioned as solution so I did try changing the z-index of the popup-label, but looks like I didn't try setting z-index of the popup AND the circle.
I'll have a go using your pictures as reference.
Not the first time I've found your information really useful, so again, many thanks Tony.
Dylan.
Thanks for taking the time to reply, especially with such clear screenshots!
Originally I was looking for way to hide all other hotspots when mouse over a specific one, but realised this probably wouldn't be possible when they shared the same hotspot template. I had found another thread in the forum about overlapping hotspots and Z-index was mentioned as solution so I did try changing the z-index of the popup-label, but looks like I didn't try setting z-index of the popup AND the circle.
I'll have a go using your pictures as reference.
Not the first time I've found your information really useful, so again, many thanks Tony.
Dylan.
Hi Dylan,
Test output here https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
Is this what you are after?
Tony
No problemThanks for taking the time to reply, especially with such clear screenshots!
Not so! I found a way to hide another hotspot even if its only using a single hotspot templateOriginally I was looking for way to hide all other hotspots when mouse over a specific one, but realised this probably wouldn't be possible when they shared the same hotspot template.
Test output here https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
Is this what you are after?
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi Tony
Sorry, I've really been trying and just can't get it working. My structure was a bit of a mess with containers and positioning so I've tried to replicate your hierarchy. I've got a z-index of 60 for the circle and the circular image for the actual hotspot, with container above which holds the line and popup-label (this container has a z-index of 80).
Thing is the label still appears under the white circle of neighbouring node.
I've also now messed up the fade and scale of the label and line so that's no longer working, think due to re-ordering the components (I removed the logic for fade and scale and can't get that working again with new structure. Think I'm having one of those days!
Yes, the example you just posted was what I was originally looking for, but hiding all other hotspots. But I'm now determined to get hang of z-index as it clearly works in your first example and really want to understand what I'm doing wrong.
I have attached my skin with all the other stuff stripped out, just in case you were feeling charitable and had time to cast an eye over it
Just when I feel like I'm getting the hang of pano2vr I hit a brick wall
Cheers!
Dylan.
Sorry, I've really been trying and just can't get it working. My structure was a bit of a mess with containers and positioning so I've tried to replicate your hierarchy. I've got a z-index of 60 for the circle and the circular image for the actual hotspot, with container above which holds the line and popup-label (this container has a z-index of 80).
Thing is the label still appears under the white circle of neighbouring node.
I've also now messed up the fade and scale of the label and line so that's no longer working, think due to re-ordering the components (I removed the logic for fade and scale and can't get that working again with new structure. Think I'm having one of those days!
Yes, the example you just posted was what I was originally looking for, but hiding all other hotspots. But I'm now determined to get hang of z-index as it clearly works in your first example and really want to understand what I'm doing wrong.
I have attached my skin with all the other stuff stripped out, just in case you were feeling charitable and had time to cast an eye over it
Just when I feel like I'm getting the hang of pano2vr I hit a brick wall
Cheers!
Dylan.
- Attachments
-
- garden-skin2.ggsk
- (3.15 KiB) Downloaded 145 times
Hi Dylan,
Seems to be okay now https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
You can download a zip with the files at https://p2vr.s3-ap-southeast-2.amazonaw ... -INDEX.zip
Tony
Seems to be okay now https://p2vr.s3-ap-southeast-2.amazonaw ... index.html
You can download a zip with the files at https://p2vr.s3-ap-southeast-2.amazonaw ... -INDEX.zip
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Thank you so much Tony, that's brilliant!
I shall study my original against what you have done so I can understand where I've gone wrong
I've found some of your Pano2vr "Little Bits' useful before and I really appreciate your help today. Top bloke!
Dylan.
I shall study my original against what you have done so I can understand where I've gone wrong
I've found some of your Pano2vr "Little Bits' useful before and I really appreciate your help today. Top bloke!
Dylan.
Hi Dylan,
Here's the skin with the hide hotspot elements.
Tony
Here's the skin with the hide hotspot elements.
Tony
- Attachments
-
- hotspot_z_hide.ggsk
- (2.11 KiB) Downloaded 160 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi Tony
Hiding the other hotspots on mouse over was my original plan but wasn't sure if it would be visually jarring for them to all disappear, I can check it out for myself with your supplied file, thanks
Interested to see what logic/actions are used to achieve it.
Cheers Tony, really useful and am sure there will be others will find it useful too.
Dylan.
Hiding the other hotspots on mouse over was my original plan but wasn't sure if it would be visually jarring for them to all disappear, I can check it out for myself with your supplied file, thanks
Interested to see what logic/actions are used to achieve it.
Cheers Tony, really useful and am sure there will be others will find it useful too.
Dylan.