Tag: image-replacement
Animated navigation items using jQuery
Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It’s JavaScript Time’, about how to use jQuery to create the effect of animated rollovers on navigation items.
The technique he outlines makes use of the same image replacement method as outlined in ALA’s original Sprites article. The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don’t see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone.
Styling form buttons
Anyone who’s used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.
Single image replacement rollovers with Suckerfish dropdowns
I discovered two of my most often used CSS techniques at the same place - Petr Staníček’s Wellstyled.com (Staropramen, Budvar, Pilsner Urquell, great CSS techniques - gotta love the Czechs 
).
And those techniques are an image replacement (IR) technique that I later found out was actually called the Gilder Levin method and the use of a single image for creating CSS rollovers without the need for preloading images.
More on Single image replacement rollovers with Suckerfish dropdowns
Absolute positioning practical examples
If you’ve read Absolute Positioning Pitfalls, you’re probably wondering when you can use absolute positioning.
Well, I generally find that I use it not for laying large areas of a layout, areas that contain multiple other elements, but rather for positioning individual elements in relation to other elements. (It certainly can be used for creating large layout areas in certain instances, but I’m not going to cover that here.)
