CSS: image swapping (i.e. image rollover/hover)

what is considered best-practice in the web community regarding image swapping?

- is pre-caching using CSS considered better than cutting a larger image and using relative positioning to display portions of it?

- is CSS better than JavaScript? Hence always choose CSS over Javascript when it comes to image rollover/hover

- what is the best resource on the web for example code, discussion, etc.

I've been recommended this website, http://wellstyled.com/css-nopreload-rollovers.html. I've tried to implement this code in a CMS, but it doesnt work well in IE6. There's still flicking issues when it comes to image swapping.

Thanks.



jeremyllAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
<<- is pre-caching using CSS considered better than cutting a larger image and using relative positioning to display portions of it?>>
if there are large number of images in your applications, then css sprites is gives better performance
http://www.w3schools.com/css/css_image_sprites.asp

<<- is CSS better than JavaScript? Hence always choose CSS over Javascript when it comes to image rollover/hover>>
There is a limit to what css can achieve since it is not a programming language, for example
-- you cannot change, update, or remove a class from an element using css.
-- you cannot do any operation on the parent tag based on the content of child, etc
So, it depends on what is requirement. Also, for css browser compatibility comes into picture big time, which is sort-of stable for javascript DOM.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VirusMinusCommented:
On the same page you've linked to, there is a fix at the bottom for IE.

CSS spriting, preloading is better in most cases as it is:
  • Simpler
  • Works without Javascript
  • Faster (Loading lesser resources, making fewer HTTP requests)
There are cases however where it may not be the best solution, eg. the iphone and other mobile devices may have problems if the size of the css sprite is large.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.