MouseOver Background Image

**wwright** · Nov 27, 2002, 13:38

Hi all,

I was reading in a xhtml book that you can use a background image on the background-color property of an a:hover tag.. But it didn't say how to do it, so I was wondering if someone knows the syntax that can make this happen..

Thanks wwright

**cow** · Nov 27, 2002, 13:43

Code:

a:hover { background-image:url(yourFile.gif); }

**wwright** · Nov 27, 2002, 17:31

That doesen't seem to work. Maybe its something I'm doing, heres the code that goes into my css...
--------------------------------------------------------
A:link { color: #6783ad; text-decoration: none; ;}
A:visited { color: #6783ad; text-decoration: none; }
A:hover { background-image:url(http://www.mysite.com/picture.jpg); }
A:active { color: navy; text-decoration: none;}
---------------------------------------------------------

Any thoughts...

Thanks wwright

**cow** · Dec 1, 2002, 18:48

hmm, instead of using the entire url, try using just the location of the file:

a:hover { background-image:url(images/yourFile.gif); }

**Wavelan** · Dec 1, 2002, 19:46

What you are doing wont work in IE, but if you try it in Mozilla if I remember correctly it will work.

I am currently researching a mouseover image change that will work in more than a couple browsers (or at least not break them) and will get back to you on my findings.

**xhtmlcoder** · Dec 2, 2002, 08:56

I don't know if this is what you are after but there are various ways to apply the CSS rollover:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<style type="text/css">
<!--
div a:hover { background-image: url("http://www.w3.org/Icons/valid-css.gif");   width: auto;}
div a { background-image: url("http://www.w3.org/Icons/valid-xhtml11.gif");   width: auto;}
-->
</style>
   <title>CSS Rollover
   </title>
 </head>
 <body>
<p>Hover your mouse over the W3C image to see it change; you also need to make a Transparent *.gif called: clear.gif to stop the missing image warning.</a>
   <div>
     <p>
       <a href="#"><img src="clear.gif" width="88" height="31"
       border="0" /></a>
     </p>
   </div>
 </body>
</html>

**cow** · Dec 2, 2002, 11:25

Originally posted by Wavelan
[B]What you are doing wont work in IE, but if you try it in Mozilla if I remember correctly it will work.

that feature must be buggy...i'm using win98 and ie5 and it works fine for me.

The SitePoint Forums have moved.

User Tag List

Thread: MouseOver Background Image

Thread Tools

Display

MouseOver Background Image

Bookmarks

Bookmarks

Posting Permissions