Make in image change on hover

[andrewsmd]

I have two images that I want to be a link. One that shows one the page and the other that shows when the user hovers over the link. How do I do this with css. I'm not very good with css. Thanks,

[oluoch28394]

if for example your two images are link-normal.jpg and link-hover.jpg,
and your html is something like this:
<div id="link">
<a href="http://example.dot"></a>
</div>

Your css would be something like this:
#link a{background:url("link-normal.jpg") 0 0 no-repeat;}
#link a:hover{background:url("link-hover.jpg") 0 0 no-repeat;}

Other properties you might want to consider are:
a:active - Adds special style to an activated element
a:focus - Adds special style to an element while the element has focus
a:visited - Adds special style to a visited link

[andrewsmd]

I didn't think about putting it into a div. I'll give that a try thanks.

[andrewsmd]

Ok so I tried that and it just doesn't show an image at all. Of course I don't have any text in the div but I don't want any just the image for a link. Here is my html

<div id = "linkSites">
<a href = "somesite.html"></a>
</div>

and here is my css
#linkSites a{background:url("pic1.gif") 0 0 no-repeat;}
#linkSites a:hover{background:url("pic2.gif") 0 0 no-repeat;}

Any Ideas? Thanks

[londrum]

that would only work if the image is in the same directory as the css file. but i'm guessing that you've got it somewhere else. so you'll have to amend the URL to point to it.

[andrewsmd]

I took out the path on purpose I have the path correct. It still isn't working.

[oluoch28394]

try something like this:
#linkSites a{
display:block;
width:100px;
height:100px;
background:url("pic1.gif") 0 0 no-repeat;
}
#linkSites a:hover{
display:block;
width:100px;
height:100px;
background:url("pic2.gif") 0 0 no-repeat;
}

Nb: 100px is just an example, I would suggest using the actual images widths and heights respectively.

[swa66]

I don't think you need the display:block; nor either of the width or height in the :hover. I actually think

#linkSites a:hover{
 background-image:url("pic2.gif");
}

is sufficient.

But you can go even neater and put the two images into one file next to one another and then just reposition the background upon hover. It work far faster as the image is already loaded and displayed, you only move it so it is visible.

[rocknbil]

If you are doing this,

<a href="http://example.dot"></a>
#link a{background:url("link-normal.jpg") 0 0 no-repeat;}

Of course nothing will display, there's no content between <a> and </a>. The background is probably there, you just can't see it because it's between the two carats ><. Add a few spaces

<a href="http://example.dot"> &nbsp; &nbsp; </a>

And you will probably see it. (DO NOT do this as a "regular practice" for spacing out elements . . . just as an example here.)

Oluoch's second example will probably work best because he/she has applied a width to the anchor.

<a href="http://example.dot"></a>

#linkSites a{
width:100px;
height:100px;
background:url("pic1.gif") 0 0 no-repeat;
}