Image switch based on if a layer is visible
<p>I have a website that contains multiple pages as layers (not as separate HTML files).</p>

<p>I have three images:</p>

<pre><code>&lt;img src="image1.png" onclick="showlayer(1);return false;" /&gt;
&lt;br /&gt;
&lt;img src="image2.png" onclick="showlayer(2);return false;" /&gt;
&lt;br /&gt;
&lt;img src="image3.png" onclick="showlayer(3);return false;" /&gt;
</code></pre>

<p>When an image is clicked, it shows the relevant layer and hides the others.</p>

<p>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).</p>

<p>Why not via the onclick event handler?...</p>

<p>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.</p>

<p>The showlayer script is:</p>

<pre><code>function showlayer(n){
    for(i=1;i&lt;=3;i++){
        document.getElementById("layer"+i).style.display="none";
        document.getElementById("layer"+n).style.display="block";
    }
}
</code></pre>

<p>Is it possible to adapt this script for this purpose?</p>

<p>thank you</p>
