SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: MouseOver Background Image
-
Nov 27, 2002, 14:38 #1
- Join Date
- Nov 2002
- Location
- Florida
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
MouseOver Background Image
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
-
Nov 27, 2002, 14:43 #2
- Join Date
- Mar 2000
- Location
- nevada, usa
- Posts
- 636
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:a:hover { background-image:url(yourFile.gif); }
"There's no justice like angry mob justice!" --Seymour Skinner
-
Nov 27, 2002, 18:31 #3
- Join Date
- Nov 2002
- Location
- Florida
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 1, 2002, 19:48 #4
- Join Date
- Mar 2000
- Location
- nevada, usa
- Posts
- 636
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hmm, instead of using the entire url, try using just the location of the file:
a:hover { background-image:url(images/yourFile.gif); }"There's no justice like angry mob justice!" --Seymour Skinner
-
Dec 1, 2002, 20:46 #5
- Join Date
- Jan 2002
- Posts
- 420
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Wavelan
-
Dec 2, 2002, 09:56 #6
- Join Date
- Apr 2002
- Location
- A Maze of Twisty Little Passages
- Posts
- 6,316
- Mentioned
- 60 Post(s)
- Tagged
- 0 Thread(s)
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>
Last edited by xhtmlcoder; Dec 2, 2002 at 09:59.
-
Dec 2, 2002, 12:25 #7
- Join Date
- Mar 2000
- Location
- nevada, usa
- Posts
- 636
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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."There's no justice like angry mob justice!" --Seymour Skinner
Bookmarks