Question

at first, sorry about my english.
My question is: I have php generated dynamic div, with id and image source.. If user click on dynamic div its swap img source.
My script works, but its swaps all div images, but not selected div img source.
Where is problem? how I can swap clicked div img source? Can someone, help me please?

My script:

<script> ( function($) { 
  $(document).ready( function() { 
    $("div.area_map").click( function () { 
      $('div[id^=grass]').each(function(div) { 
        $('img.hoverswap').css("width","229"); 
        $('img.hoverswap').css("height","124");
        $('img.hoverswap').attr("src","default/citymap/D5.png"); 
        $('img.hoverswap').css("z-index", "9999") 
       } ); 
     }); 
   } ) ( jQuery ); 
</script>

And div:

<div class="area_map" id="grass
  <?php echo $k+$st_x/2; ?>" 
  style='cursor:pointer; width:118px; height:51px; position:absolute; 
  left:<?php echo $st_x; ?>px; 
  top:<?php echo $st_y; ?>px;'>
  <img src="default/citymap/Zale2.png" name="table" border="0" 
    usemap="#tableMap" class="hoverswap" 
    style='cursor:pointer; z-index:-300; width:118px; height:51px;'/> 
</div>

Answer 1

use

$(document).ready( function() { 
    $("div.area_map").click( function () { 
                $('img.hoverswap')
                .css(
                {
                "width":"229",
                "height":"124",
                "position":"absolute",//to make z-index work
                "z-index", "9999"
                })
                .attr("src","default/citymap/D5.png");
       }); 
   });

also edit css for div.area_map

div.area_map{
 position:relative;
}

this will make your z-index work relative to area_map