title: Image switch based on if a layer is visible
body: <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>