Mustardseed Media Inc.

or

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

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

Thanks

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.

Worked it out

Worked out how to do it, thanks to this article http://www.nicklewis.org/node/843

Cool...

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!

Panels?

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!

reply

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.

Site name and Site slogan

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,

Logo Replacement

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.

Logo and Site name Replacement

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,

reply

Why would anyone in their right mind purposely browse without images or CSS? I fully understand the benefits of image replacement when it comes to SEO and in many cases screen readers, but as far as general browsing, I see no benefit to removing CSS or images, and as such, I’ve never had the incentive to fully degrade-proof my own sites.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This ensures you're an actual human being...not one of those sassy web robots.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.