title: How do I make a image overlay a image when a checkbox is checked Jquery
body: <p>Hello I am trying to setup a web page where, if my customers select certain options a image appears in the Right hand corner, when you select options it overlays other images on that image to show you the final product. I have this code I have played with a little bit from an example and modified to make it work however I am stuck on makeing it show the image and overlays when checkboxes are checked and hide them when unchecked. </p>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>.overlay {
      display: none;
      position: absolute;
  }
  #map {
      position: relative;
      border: 1px solid black;
      width: 350px;
      height: 200px;
  }
  #station_A { 
      top: 5px; left: 85px; 
  }
  .hover { 
      color: green 
  }
  </code></pre>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div id="map"&gt;
      &lt;span id="station_A" class="overlay"&gt;&lt;img src="/tn_bandannatop.png&gt;"&lt;/span&gt;
      &lt;span id="station_B" class="overlay"&gt;Highlight image here.&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
      &lt;span class="hover station_A"&gt;Station Alpha&lt;/span&gt; is one example.
  
  &lt;/p&gt;      
  </code></pre>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>jQuery(function() {
      jQuery('.overlay').each(function(i, el) {
          jQuery('.' + el.id)
              .mouseenter(function() { jQuery(el).css('display', 'inline') })
              .mouseleave(function() { jQuery(el).css('display', 'none') });
      });
  });
  </code></pre>
  
  <p>UPDATE: <a href="http://jsfiddle.net/dynfvzsw/1/" rel="nofollow">Fiddle is here </a>
  This is setup for mouse over, however I want to change it to actions of on checkbox checked and unchecked.</p>
  
  <p>UPDATE: Added Checkboxes to the <a href="http://jsfiddle.net/dynfvzsw/4/" rel="nofollow"> fiddle</a> here. Left mouse over code in for now to show what I want it to do when checkbox is checked.</p>