SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast wwright's Avatar
    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

  2. #2
    pg for mild peril cow's Avatar
    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

  3. #3
    SitePoint Enthusiast wwright's Avatar
    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

  4. #4
    pg for mild peril cow's Avatar
    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

  5. #5
    SitePoint Evangelist
    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

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    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.

  7. #7
    pg for mild peril cow's Avatar
    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.
    that feature must be buggy...i'm using win98 and ie5 and it works fine for me.
    "There's no justice like angry mob justice!" --Seymour Skinner


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •