Hello all
Is there any way to change the Z-index of an item on the click event of a button?
Many thanks
Paul
Z-index
Hi Paul,
Yes you can change the Z-Index of an element using a mouse click, Go to URL and Javascript.
https://p2vrlittlebits.s3-ap-southeast- ... index.html
In this example I have two coloured rectangles, a blue one, named 'blue' and a pink one, named 'pink'. The blue one has a Z-Index of 1 and the pink one has a Z-Index of 2.
I also have two text buttons, one 'Blue to the Front', named 'blue front', and one 'Blue to the Back', named 'blue back'. The 'Front' button changes the Z-Index of the blue rectangle to 3, hides itself and shows the 'Back' button. The 'Back' button changes the Z-Index of the blue rectangle to 0, hides itself and shows the 'Front' button.
The Actions for the 'Front' button are;
1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "3";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue back
The Actions for the 'Back' button are;
1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "0";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue front
cheers,
Tony
Yes you can change the Z-Index of an element using a mouse click, Go to URL and Javascript.
https://p2vrlittlebits.s3-ap-southeast- ... index.html
In this example I have two coloured rectangles, a blue one, named 'blue' and a pink one, named 'pink'. The blue one has a Z-Index of 1 and the pink one has a Z-Index of 2.
I also have two text buttons, one 'Blue to the Front', named 'blue front', and one 'Blue to the Back', named 'blue back'. The 'Front' button changes the Z-Index of the blue rectangle to 3, hides itself and shows the 'Back' button. The 'Back' button changes the Z-Index of the blue rectangle to 0, hides itself and shows the 'Front' button.
The Actions for the 'Front' button are;
1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "3";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue back
The Actions for the 'Back' button are;
1. Source = Mouse Click | Action = Go to URL | URL = javascript: skin._blue.style.zIndex = "0";
2. Source = Mouse Click | Action = Visibility | Type = Hide Element | Target = _self
3. Source = Mouse Click | Action = Visibility | Type = Show Element | Target = blue front
cheers,
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 Paul,
Glad it helped. I'd like to see your finished animated carousel when you are done.
Tony
Glad it helped. I'd like to see your finished animated carousel when you are done.
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/