I want a border around an image,a nd then, when hovering, the border color should change

For example, like this site: http://jessicaalba.org

Try hovering their image, most of them has a greenish border that turns brown when hovering.

I have this code for it:
.pics {border: 2px solid #F5F4F4;}
a hover .pics {border: 2px solid #F5F4F4;}

But the problem is that this only works when an image is an link, like this

<a href="whatever.com"><img src="image.gif" class="pics"></A>

and not when I just have an image

<img src="image.gif" class="pics">

Is there any way I can fix this thingy?

Well, in theory it should be just as easy to accomplish when the image isn't a link. However, big, dumb Microsoft decided that it would be a great idea to limit the use of the :hover psuedo class to the <a> element. The only two ways you'd be able to get around it are to 1) use the <a> element, but don't make it a link (omit the href attribute), and 2) use javascript and the DOM to change the border style for the image when you hover over it. The problem with method two is that each image would need its own unique ID. Well, maybe there's a different way, but I'm not exactly a Javascript, guru, so maybe someone else (Google?) can help you if method one doesn't work out.

Wow, that totally sucks! I thought that there was an easy way to accomplish this effect. I guess not.

Oh well, it's not worth it. I'll just let it go.

Thanks! :)

No sweat, but there's no need to thank me until you get results.