Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 3 FirstFirst 1 2 3 LastLast
Results 11 to 20 of 28
  1. #11
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    hey steax that seems great but .. wouldnt it then be just as easy to do it the javascript way? since that uses javascript either way if js is disabled both will fail... and where do i d/l the .htc file for :hover?

  2.  

  3. #12
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Basically the typical approach is to use the :hover technique on a tags. When you can't, you use Javascript to layer it on for IE, and rely on the :hover technique in other browsers. It'll degrade gracefully in other browsers, and the only people left out are those who have both IE and JS turned off.

  4. #13
    Senior Member kade119's Avatar
    Join Date
    Feb 2007
    Location
    USA
    Posts
    532
    Member #
    14888
    Liked
    1 times
    when you say javascript to layer it, you mean the way steax mentions w/ suckerfish? or just swap image javascript?

  5. #14
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    There are multiple ways to do it. Suckerfish is one, the behaviors file is another. As long as it gets done, you're good. The Suckerfish one carries the disadvantage that it operates on all browsers by default; I'd argue it's best to put it in conditional comments so only IE sees it.

  6. #15
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Well, suckerfish has a little article on the page about the advantages over .htc:

    Suckerfish vs. .htc

    IIIIN the blue corner we have Suckerfish, the original lightweight, accessible, cross-browser, standards-compliant :hover mimic. IIIIN the red corner we have '.htc' - the JavaScript files accessed via CSS to mimic :hover.

    Ding ding!

    And Suckerfish instantly lands a heavy blow on .htc's validity - .htc simply isn't standards compliant CSS.

    Oooo... .htc sneaks in a crafty jab without the need for additional selectors...

    Suckerfish bounces around the ring. He's much lighter weight than his opponent.

    And OH! The IE 5.0 uppercut! That's something that .htc just doesn't have the skill to do, whereas Suckerfish can work IE 5.0 seamlessly.

    .htc is dazed! And the contest is over! Suckerfish wins on points! TKO!
    So, suckerfish has the advantage of being standards compliant in CSS, is lighter (by filesize), and works on IE5. .htc has the advantage of not needing extra selectors...

    Both of them use Javascript in some way or another, AFAIK... Make your own verdict.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #16
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    I always used to use CSS for rollovers but have recently switched back to using JS. I figure that JS has made a huge comeback of late and is pretty much essential for a lot of mainstream sites - it seems inevitable that JS and AJAX are going to become as fundamental as CSS.

    More importantly, I don't like the slight delay you sometimes get while waiting for a CSS hover image to load. Obviously you can preload the images but that's using JS. If you're using JS to preload then you may as well go the whole hog and use it for the rollover itself.

    As for graceful degradation, if JS is disabled then the visitor sees only the original image on hover. I'm quite happy to accept this as I don't think any sort of hover effect should be needed to understand and navigate the site; only to add to the design and general style.

  8. #17
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    But you don't need preloading if you use sprites appropriately. The only delay then is in the initial background load, which would be unaffected by preloading anyway. CSS just seems like a far more elegant way of achieveing it, plus rollovers are a stylistic issue and are therefore well-fit for CSS.

  9. #18
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    To be honest I've never looked at sprites in CSS before. It looks useful but I still question the need to worry about using JS in the same way we did a couple of years ago. There are so many sites that extensively use it and people with JS disabled are used to missing out on the 'cool' stuff. They are unlikely to be the sort of people who will worry about a rollover image.

    In an ideal world obviously getting it right for as many people as possible is the ultimate goal. In the commercial world getting the job done efficiently is often prioritised and I've become fed up of CSS techniques which, when explained, are often followed by a list of hacks and cosiderations for IE which make them far from elegant. Ultimately, I'm happy to offer less to the 6% or so of people who choose to disable JS. They'll lose some design features but usability is not affected.

  10. #19
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Your argument makes sense, but there is a tremendous amount of elegance lost when using JS instead of CSS for this effect. In CSS, it can be done in two lines of code. In Javascript, you have to worry about preloading and hover handlers and mouseout handlers, etc, etc. And when you're just dealing with a elements, you don't have to worry about IE's stupiditiy either (unless you bring transparent PNGs into the mix).

  11. #20
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    I understand where you're coming from and I probably would have argued your point two weeks ago. I guess I've just had too many sites to deal with over the past month or so and I've had too many "CSS doesn't behave quite right in x browser" moments.

    Plus I've been developing sites with more functionality so JS is kinda where my mind is now.

    I would probably still advise someone new to design to use CSS, it is easier to implement and it does work very well albeit with a few slight annoyances.


Page 2 of 3 FirstFirst 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com