Setting an Image Background that Changes on Mouseover

Hey guys,

I'm slowly getting a grasp on the basics of CSS but images and divs still have me a bit baffled.

I've got an image that's 100x100 and I'd like to have an image border around it that has 2 or 3 pixels of light grey background and then a darker grey 1px border. When the image is scrolled over, I'd like the backround and border to change colour. Is this possible?

I'd like to add similar border to all my images although not all of them will need the scrollover thing.

Can anyone point me in the right direction?

Thanks!
Kirsty

 

Yes, but you might need to use Javascript. There are certainly ways you can make images rollover with that. With that, you could make your border image an actual image, which would allow you more control over the way it looks and wouldn't restrict you to simply using a square box.

A search for "Javascript rollover" should yield plenty of tutorials.

However, with CSS you can use the "a hover:" attribute combined with making the image a link, to get a mouseover style. For instance, this will style your links grey:
A:hover {
COLOR: #999999
}
But if you simply use "a hover:", that would style all your links, not just the image.

I found this on MSDN (the page is no longer there, however):

http://216.109.125.130/search/cache...asp&w=img+hover&d=FvUSePmdOn7a&icp=1&.intl=us

 

This is actually possible using just css. In order to achieve what you are aiming for, follow these steps...

Style an a element as block [ display:block ]
width and height [ 100 x 100 ]
padding: 3px
background color light grey
border color dark grey
background image no-repeat center center

then under a:hover put in the styles for the hover state which would different border and background color.

Since you are aiming to be specific remember to assign a element a class or an id

 

Thanks guys.

Semantic7 cheers for that, I was pretty sure it could be done with only CSS. Any change you could spell it out to me like I'm an idiot though as my CSS skills are pretty horrible. If you or someone could tell me what to type in my stylesheet and what exactly to put into my HTML file it'd be a life saver.

Thanks again!
Kirsty

 

If you can post a link to your site or an exact picture of what you want to achieve I can give you the exact code. Without that its difficult.