Tech Note: Replacing Images
Science | Wed, Dec 31, 2008 at 5:36:46 pm PST
We’re improving the infrastructure around here again. One visible change is the disappearance of the little blue word balloon icon (
), that showed up next to the number of comments at the bottom right of each front page article; it was redundant, because clicking the number of comments went to the same place, so the icon got the axe.
Bye, little blue word balloon. We’ll miss you.
Another change is that the remaining icons in that row now have “rollover” states, meaning that when your mouse cursor passes over them they change color subtly.
One major change you can’t see is the way that row of icons is constructed, but it’s kind of interesting from a techie standpoint, so we’ll explain it and those of you not interested in the nuts and bolts can skip ahead to what will inevitably become an open thread.
Previously, those icons were simple PNG images. The new structure uses an unordered list, combined with the Phark image replacement technique to display the icons as background images instead of <img> tags. This method is more accessible to screen readers, and also lets us achieve that rollover effect through pure CSS, without any Javascript.
Here’s a simplified version of what the list looks like in HTML:
The CSS code removes the bullet style from the unordered list, and floats the list to the right. The list items are all floated left, so they appear horizontally instead of the default vertical arrangement. A 4-pixel margin is added to create some space between the icons.
The links themselves are set to a fixed width and height, their display type is set to ‘block’, then the text inside them is moved off screen by setting the text-indent property to negative 10000 pixels. The background-repeat and background-position properties for all the links are set.
Then we can set the background images for the links, like so:
From an accessibility standpoint, this is an improvement; screen readers don’t pay attention to CSS, so they will see (and read) the text inside the links, while standard browsers will show the background image and no text.
The rollover effects are achieved with a nifty trick that uses only one image. Here’s the complete PNG file for the email icon, to show how it’s done:
Notice that both image states are combined into one file. Since the width of the links was explicitly defined as 16 pixels, we’re only going to see 16 pixels of the image at a time when it’s used as the background. And we can change to the rollover state simply by changing the background-position of the image, like so:
This instantly slides the image 20 pixels to the left (because the second image in our combined file begins 20 pixels from the left), so the rollover image now shows in that little 16 pixel area.
Image rollovers and increased accessibility, without a single line of Javascript — but wait, there’s more! The other big advantage of this technique: by using background images for this repeating element (the row of icons appears at the bottom of every front page post) instead of image files, there are far fewer calls to the server to display the page.
We’re now in the planning stages for converting the comment icons (that appear at the top right of each comment) to a similar system, which could result in a big improvement in the loading time of pages with lots of comments. And we know you’re as excited about that as Stinky and I am.
