SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: is it possible

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is it possible

    Hi

    I have a text link within a div of 50px x 50px by example. The div has a background image. When I mouse over the text link can I get that background image to change to another one?

    Is this possible?....

    Many thanks

  2. #2
    SitePoint Enthusiast keyshey's Avatar
    Join Date
    Nov 2007
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe try

    a: hover {
    background: url(images/image.jpg);
    }

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the div completely.

    and give the <a> tag a class of whatever...

    Now add this to css:

    Code:
    .whatever {
    display:block;
    width:50px;
    height:50px;
    background: url(images/bgimage.jpg);
    }
    .whatever:hover {
    background: url(images/bgimage_rollover.jpg);
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok many thanks

    will give this a go.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd actually combine the two images into a single file then "slide up" the hover state via the background-position: property.

  6. #6
    SitePoint Enthusiast chipper's Avatar
    Join Date
    Aug 2003
    Location
    middle of nowhere aka west texas
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What Dan said - you may run into 'flicker' problems in certain browsers if you swap images in the background with CSS.

  7. #7
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Combining the images also results in a smaller download size as one big image takes up less space than two half sized images.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - never done this before - i am guessing one gif - with the 2 states on, above each other. then set property to top align and then bottom align when hovered...thats great...if i am right in understanding it.

    thanks

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quite, you just shift the background position like in this example

    http://www.dave-woods.co.uk/?p=101

    Create two images within the one image and then within the hover state you'd have something like this

    Code:
    #navigation a:hover {
    background-position: right -198px;
    }
    The -198px in this example is the exact point at which the second image starts.

    Hope that makes sense.

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep brilliant

    thanks


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
  •