title: Select parts of stacked images in html/jquery/javascript
body: <p>I have a map of the UK broken down into various geographic regions. I would like to make it so that when a user hovers over the section some text appears.</p>
  
  <p>My question is, what is the best way to get the images to do this.</p>
  
  <p>One way I have tried is to create a png file for each area in the correct location within a fixed sized canvas with a totally transparent backgroud. This works in terms of showing all the areas as one complete map. But does not allow me to add a handle onto each image section as they are stacked on top of each other so only the top one is available.</p>
  
  <p>I have also attempted to put an 'area' over the top to try and define a hot spot. However this also didn't work as the shapes are too complex...</p>
  
  <p>Here is the html/css markup</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
          $('#scot').hide();
          $('#wales').hide();
  
          $('#scotmap').click(function() {
              $('#scot').show();
          });
          $('#img2').click(function() {
              $('#wales').show();
          });
      });
  &lt;/script&gt;
  
  &lt;div id="wrapper"&gt;
      &lt;div id="img1" class="mappiece"&gt;
          &lt;img src="Images/map/scotland.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img2" class="mappiece"&gt;
          &lt;img src="Images/map/nw.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img3" class="mappiece"&gt;
          &lt;img src="Images/map/se.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img4" class="mappiece"&gt;
          &lt;img src="Images/map/wales.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img5" class="mappiece"&gt;
          &lt;img src="Images/map/ireland.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img6" class="mappiece"&gt;
          &lt;img src="Images/map/yarmouth.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="img7" class="mappiece"&gt;
          &lt;img src="Images/map/york.png" alt="Scotland"&gt;
      &lt;/div&gt;
      &lt;div id="map" class="mappiece"&gt;
          &lt;area id="scotmap" shape="poly" coords="76,9,76,50,87,50,87,92,96,92,96,101,105,101,105,132,120,132,120,122,132,124,137,120,151,124,154,128,160,127,163,129,171,125,173,119,164,92,147,76,164,37,144,7" nohref alt="Scotland Map" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="text"&gt;
      &lt;div id="scot"&gt;
          &lt;p&gt;Hello Scotland&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="wales"&gt;
          &lt;p&gt;Hello Wales&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  body{background-color:#fff;}
  
  #wrapper{
  width:237px;
  height:258px; 
  position: relative;
  }
  
  .mappiece {
  position: absolute;
  width:237px;
  height:258px; 
  top:0;
  left:0;
  }
  
  #img1 {
  z-index:80;
  }
  #img2 {
  z-index:20;
  }
  #img3 {
  z-index:30;
  }
  #img4 {
  z-index:40;
  }
  #img5 {
  z-index:50;
  }
  #img6 {
  z-index:60;
  }
  #img7 {
  z-index:70;
  }
  </code></pre>
  
  <p>Any points in the right direction will be greatly appreciated. In terms of the mouse over /mouseout/click jquery events, I am ok with these. It is just the image manipulation that I am struggling with.</p>
  
  <p>Kind Regards</p>