Image switch based on if a layer is visible
- by Zuno
I have a website that contains multiple pages as layers (not as separate HTML files).
I have three images:
<img src="image1.png" onclick="showlayer(1);return false;" />
<br />
<img src="image2.png" onclick="showlayer(2);return false;" />
<br />
<img src="image3.png" onclick="showlayer(3);return false;" />
When an image is clicked, it shows the relevant layer and hides the others.
I want it to also change the image to image1_active.png / image2_active.png / image3_active.png depending on which layer is visible (not via the onclick event handler).
Why not via the onclick event handler?...
Layer 1 is set as visible by default in the CSS, so image1 needs to be image1_active.png by default too - since the user has not had to click on anything yet, this is why I need the image switch to detect the layer's visibility/display to change the image.
The showlayer script is:
function showlayer(n){ for(i=1;i<=3;i++){document.getElementById("layer"+i).style.display="none";document.getElementById("layer"+n).style.display="block"; }}
Is it possible to adapt this script for this purpose?
thank you
