roll over effect, show another image

I have an href image in this markup.

<div class="imgdiv">
   <a class="imga" href="h开发者_如何学编程ttp://destination.com">
      <img src="http://image.com/image.jpg" width="100" height="100">
   </a>
</div>

When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?

My CSS looks like this but it still doesn't work

a.imga:hover {
   background-image: url('over.png');
   background-position: top;
   z-index:3;
}

**Here is the solution you can try**

<div class="imgdiv">
       <a class="imga" href="http://destination.com">
          <img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
       </a>
</div> 

Use can do it with CSS, but insted of img tag use a DIV with a background image

<div id="image"></div>

CSS style

        #image{
            width: 100px; //Image height
            height: 100px; //Image width
            background: url('') 0 0 no-repeat; //Give your image path here
        }

        #image:hover{
            background: url('') 0 0 no-repeat; 
        }

Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.

You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.

Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.