Image switch based on if a layer is visible

Posted by Zuno on Stack Overflow See other posts from Stack Overflow or by Zuno
Published on 2012-12-16T05:02:19Z Indexed on 2012/12/16 5:03 UTC
Read the original article Hit count: 94

Filed under:
|

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery