SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Rollover Effect - best approach

    Looking for browser compatibility, noticing some hovers don't work in certain browsers, what might be the best way too display the image hover?

    - combine the 2 images into one and adjust the 'background-position' for hover?
    (this be proportational on widely varying screen sizes?)

    - use an 'img id' along with a 'div id' ?

    And I beleive there is also a way to set an anchor.

    What say us?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    noticing some hovers don't work in certain browsers,
    thats odd, even IE7 supports :hover on most elements, of course you have to make sure you have a proper doctype.

    - use an 'img id' along with a 'div id' ?
    this is overkill, ID are and should be unique. Withing any individual HTML document ,you shouldn't ever need to get more specific than an(one) ID.


    - combine the 2 images into one and adjust the 'background-position' for hover?
    dunno what specifically you are trying to accomplish, but sprites are a good idea on any fixed size elements, this technique will also reduce the "blinking" effect that occurs when a browser has to load a rollover image for the first time

    And I beleive there is also a way to set an anchor.
    I prefer to set the :hover to set hover on the outermost element.
    so for example li:hover div a {...} that way effect has a the broadest hit area, if that is your goal.


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
  •