How to make Rollover images in Texbox?

I have seen this site www.entireweb.com I was wondering how we can ma开发者_Go百科ke the "Magnyfying Lens" in search box roll over like that.

If you notice it has 3 images..

I know how to do 2 roll overs but where will i put the 3rd one..

Thanks

Please code it if your free :p

---

there is 3 selectors to think about

:hover

:active

and then the default state of the link/button

you can see it in action here http://www.jsfiddle.net/rpSgy/

just made an example with images

http://www.jsfiddle.net/ZATzF/

---

the third is done on mousedown and on mouseup

$('#maglensid').mousedown(function(){
    //swap to pressed image
}).mouseup(function(){
    //swap to normal image
}).hover(function() {
    //swap to hover image
}, function() {
    //swap to normal image
});

---

Here is their css, they are just moving a sprite image about using the css background property. A default position, a hover position and an active (i.e. clicked) position.

.web #front_logo, .web #search_form, .web #search {
   background-image: url("../skin_web_glare.png");
}

#search {
    background-position: -340px -70px;
    cursor: pointer;
    height: 44px;
    margin: 4px 0 0 7px;
    width: 43px;
}

#search:hover {
    background-position: -390px -70px;
}

#search:active, #search.active {
    background-position: -440px -70px;
}

So I don't think they are actually using any jquery/javascript just css (the way it should be :)).