SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to use a:hover for pictures?

    Hey

    Im wondering if its possible to use a:hover to switch between two picture when you roll your mouse over one of the pictures??

    I tried this:

    Code:
    <span style='a:hover{ background-image: url(images/grafics/kontormaskiner_ikon.gif);'><img src='images/grafics/kontormobler.gif' alt='kontormobler' /></span>
    but that is not working. Is what i request even possible this css? or shall i use JavaScript?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The css swapping (or shifting) of background images is the basis for modern rollovers - no javascript required. Check out some example image galleries, menus and lists that do this.

  3. #3
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Additionally, avoid whenever/wherever possible to use inline styles as in your code, and put your css code in an external css document. Furthermore, you never include selectors in your inline style. it seems like you need to learn a little bit more fundamental css techniques, try www.htmldog.com www.w3schools.com or www.cssbasics.com
    Dan G
    Marketing Strategist & Consultant

  4. #4
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not with a background image because the background is the size of the first one.

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im using inline code because im using some php to define some of the css code, which is not possible if i do css in a external stylesheet.... Else thanks alot for your help... it really helped me out alot...

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can always give the HTML output a class or ID then refer to it in your stylesheet.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,786
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    im using inline code because im using some php to define some of the css code, which is not possible if i do css in a external stylesheet.
    You can't define styles for pseudo-classes (such as hover) in inline styles because they don't actually exist in the html. You need to set them up in the stylesheet as Dan said above.

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can swap that background image as often as you like, but as it is the background of another image, you'll never see it, just the foreground one. (Look more closely at the code - I've inserted a new line after the hover style to make it more obvious)

    Code:
    <span style='a:hover{ background-image: url(images/grafics/kontormaskiner_ikon.gif);'>
    <img src='images/grafics/kontormobler.gif' alt='kontormobler' /></span>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,786
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    <span style='a:hover{
    This is not valid - You can't use this at all (in case it wasn't clear already )

    As a matter of interest only you can actually apply a background image to an image and swap them on rollover as the first example in the link below shows:

    http://www.pmob.co.uk/temp/image-on-image2.htm

    Not sure what use it will be but its interesting all the same.

    I suppose it could allow an extra hook for background images though like this (ignore that the img should be in a block element as this is just a demo).






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
  •