I’ve been playing around quite a bit lately with image replacement, which means that I put text on the web page and then use CSS to replace that text with an image. So, when someone is looking at the page with a browser, they see the nice graphic. If google looks at the page, it will see the text and index it as part of the page.
Theoretically it’s the best of both worlds, but in practice it can be a little hairy. One problem is that no one has come up with the very best text replacement solution. Every method has its drawbacks which are usually related to how the page looks in a variety of situations like with images turned off but CSS turned on (that one’s tricky). There are also design considerations. If I want to use a nice transparent ping for layering then I can’t use the method that just puts a graphic over the text or the text will show through.
Add to all this complication the fact that I’m not just replacing a title usually, I want to replace navigation, which means I have rollovers, I have links on the text, and I have headaches.
I have settled on a method that I like, that’s flexible and that’s easy to use. I didn’t discover this method, it’s credited to Mike Rundle and referred to as the Phark Method (according to CSS Tricks). Basically it styles the tag holding the text to the correct size of the graphic, pushes the text off the page so that you don’t see it and then puts the graphic in as the background of the tag.
I’ve used this for navigation (augmenting it with the IE 6 no-flicker trick of putting the image in the background of the a and the li tag, I told you this could get complicated) on several sites. I also usually user the sliding door css background for the hover and unhovered states of the link, so that the images for the nav are really in one big image that I just move around in the background.
And all of that together winds up in a navigation bar that most people probably don’t even notice because it looks nice and works correctly. There a job well done.
{ 0 comments }
