Selection problems

Selection problems

Hey,

I'm trying to create a div that contains an image that will hide when hovered. So far, so good, that bit is working. However I want to be able to display more than 1 image per page. I currently have:

$(document).ready(function(){

$("div.screenshot").hover(
   function() {
      $(".screenshot #hideme").slideUp();
   },
   function() {
      $(".screenshot #hideme").slideDown();
   });
});


Which hides an image with id of 'hideme' when the screenshot div is hovered.

When I have more than one 'hideme' image, though, all images get hidden when hovering over the 'screenshot' div. I've tried all kinds of combinations of CSS selections to try and get it to hide just the *NEXT* image, but I'm having no luck.

My HTML is:

<div class="screenshot">
<img src="images/a4e.jpg" id="hideme">
</div>

<div class="screenshot">
<img src="images/minsterg.jpg" id="hideme">
</div>


Any suggestions?