SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member MaxLax44's Avatar
    Join Date
    Sep 2005
    Location
    Rochester, NY
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good Rollover Image Tutorial?

    Does anybody have a link to a very good/detailed CSS rollover image tutorial? I'm new to Webdesign although i've been in graphic design for a few years now. Also note that I need to have more than one on a page. Any help is appreciated, thanks.

  2. #2
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try "rollover image css tutorial" in Google for some good resources.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Well it's not a very detailed topic so I'll post what I use. You have to make rollovers on the a element because Internet Explorer doesn't recognize the :hover pseudo class on any other elements.
    CSS
    Code:
    #example {
      display: block;
      width: 200px;
      height: 100px;
      background: #000 url(image.gif) no-repeat top left;
    }
    #example:hover {
      background: #000 url(image_over.gif) no-repeat top left;
    }
    HTML
    Code:
    <a id="example" title="A very worthwhile link" href="#"></a>
    The background: #000 url(image.gif) no-repeat top left; changes on :hover.
    #000 is a background colour.
    That's a very brief intro to rollovers.
    Last edited by markbrown4; Jan 2, 2007 at 21:50.

  4. #4
    SitePoint Guru Rob_D's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    You have to make rollovers on the a element because Internet Explorer doesn't recognize the :hover pseudo class on any other elements.
    Good point.

    There is another way using JavaScript for other elements, but think about those who don't have it switched on.

    So, Google "rollover image javascript tutorial" for some other resources.
    It has yet to be proven that intelligence has any survival value.
    Arthur C. Clarke

  5. #5
    Non-Member MaxLax44's Avatar
    Join Date
    Sep 2005
    Location
    Rochester, NY
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks guys. I think I'm gonna end up taking a stop at the javascript forum.

  6. #6
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    You have to make rollovers on the a element because Internet Explorer doesn't recognize the :hover pseudo class on any other elements.
    IE7 does recognise :hover pseudo class with other elements however.
    There's a very simple demo here http://www.dunedinicehockey.co.nz/temp/rollerover1.html

    If you want to provide a more semantically correct site but also encourage users to upgrade their browser then this could be a definite option. But if you have to keep <IE6 browsers happy then you'll definitely need to use the <a> tag.

    There's little point in using Javascript for rollovers IMO. Less likely to be viewable by your users and it'll likely use more code too.

    Ryan,

  7. #7
    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)
    Quote Originally Posted by markbrown4 View Post
    Hi,
    Well it's not a very detailed topic...
    Way ahead of you Mark .

    http://www.sitepoint.com/forums/show...79#post2957279

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Way ahead of you Mark .
    Do you realize how smug you sound Dan ?

    It's really not that detailed - you have :hover, it can only be used on anchors and the javascript hack to make IE work isn't accessible so I wouldn't use it..

  9. #9
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Crazy, I had no idea about .htc files and all that mumbo jumbo in there.
    Looks good though and it seems I have some more reading to do

  10. #10
    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)
    And now that IE 7 is out (and the fact that I've gotten a LOT better since then) it's come time for me to re-write that. Oh, and Mark, that was written back in August. Amazing how time flies, isnt' it?

    (Believe it or not, it's a miracle I even remembered writing that "drive-by" post in the first place.)


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
  •