Image Swap on Mouse Over

How do i change one image to another when the mouse goes over it?

[Scrimbler]

Hi,

this is my first post, apologies if i put it in the wrong area or anything.

I would like to use CSS if possible (instead of javascript) to simply change from one image to another when the user places the cursor over the initial image.

any help apprciated,

thanks,

-Scrimbler

[le_gber]

Is this for a link?

If it is you can use something like:

a.imglink:link, a.imglink:visited, a.imglink:active{
background-image: url(path/to/image.gif);
}

a.imglink:hover{
background-image: url(path/to/image_mouseover.gif);
}

Hope this helps

Leo

[moltar]

Look for "Fast Rollovers Without Preload"

[Scrimbler]

Leo,

thanks for the code, i understand it all ok.

I was wondering would it be possible for you to give me an example (relating to yours) of the code that will be needed in the xhtml file?

i'm just getting to grips with the basics of CSS so i apologise for asking so much of you.

Thanks very much,

Scrimbler

[le_gber]

Sure no pb,

if it's to be the background of a text link simply use:

<a href="mypage.htm" class="imglink">my text link</a>

and if you don't want the text and only the img rollover:

.imglink:link, .imglink:visited, .imglink:active {
text-decoration: none;
background-image: url(path/to/image.gif);
text-decoration: none;
width: 132px; /* use you own image size; */
height: 125px; /* use you own image size; */
background-repeat: no-repeat;
background-position: left top;
display: block;
}

.imglink:hover{
background-image: url(path/to/image_mouseover.gif);
text-decoration: none;
width: 132px; /* use you own image size; */
height: 125px; /* use you own image size; */
background-repeat: no-repeat;
background-position: left top;
display: block;
}

and in the page <a href="mypage.htm" class="imglink">&nbsp;</a>

tried it in FFox and Ie and works in both but might not work in older browsers

Leo

[Scrimbler]

Worked a treat, thankyou very very much- im learning a lot by the day.

My only little gripe was that in my code i originally had a "<br />" after where the picture was, so the next thing was on the the next line down. unfortunately it left a black gap in the middle which i didnt want, so i removed the "<br />" and it corrected itself...

<img src="images\POTW.jpg"><br />
<a href="mypage.htm" class="imglink"></a>
<img src="images\BOTW.jpg" alt="" /><br />

it looks fine because of the constraints of the table, but i assume this is not good practice...?

Thanks again, your efforts are much appreciated here!

-Scrimbler