CSS Image Replacement

In this premier episode of the Mustardseed Media Video Podcast, Bob shows you how to replace any HTML element with an image in a search engine friendly and accessible way. Sweetness!

Awesome thanks for the insight. I had one question. Is there any reason that you wouldn't use a z-index for the image instead. Then if somebody doesn't have the picture load, they at least have the title. I am still a newb at this and was just curious. Thanks Kent
posted by:
clawki
Thanks Rob, great podcast How would I apply this technique to a Drupal Menu? I have my Primary Links I'd like to replace with images, however they're only outputted as a list and I dont know how to specify the individual link in the css.
posted by:
Paul
Worked out how to do it, thanks to this article http://www.nicklewis.org/node/843
posted by:
Paul
Sorry I didn't get back to ya on this one...it got lost in the shuffle. Glad you figured it out, thanks for posting the link!
posted by:
Bob
Hi there, I'm enjoying your podcasts, thanks so much. Have you used Panels 2 yet? I would love to see a primer podcast on Panels! Take care!
posted by:
Anonymous
Instead of hiding the text in the header (which needs us to be able to address the text separately from the header itself, hence the meaningless span), let's just move it out of the way.
posted by:
auto glass replacement
Hi Bob, I appreciate what you're doing. I hope I can teach you something some time. I was wondering if it could be good or bad or useless to replace the site name and the slogan by the logo with this technique. Thanks,
posted by:
Seb
Hey Seb.... Replacing the site logo and slogan with images are just about the best place to use this. Menu items are another great way. That way, you can be sure that the underlying html text is accessible to anyone and everyone who isn't loading the CSS images.
posted by:
Bob
Hey Bob, let me explain with more details. My logo is the site name with the slogan; it’s part of it. So, I don’t want to show that information twice by checking the Logo, the Site name and the slogan in the site configuration. So, is it useful for robot if I check Logo, Site name and Site slogan? If yes, should I use your technique and only show my logo and set the rest with a height 0px? Can that be spam? Maybe that’s too much question and I should only checked the logo in site Configuration. What do you think? Thanks a lot,
posted by:
Anonymous
Using this method, IE 6 seems to reload the image every time it's moused-over on my site. I noticed that the site title on MustardseedMedia exhibits this same symptom, while Geeks&God does not. The CSS is essentially the same for both, at least at the "h1.logo a" level. Any idea why this might be happening, and how to prevent it? Thanks for all your awesome work!
posted by:
Jeff Schuler