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
Submitted by clawki (not verified) on July 16, 2008 - 3:47am.
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.
Submitted by Paul (not verified) on July 22, 2008 - 1:36pm.
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.
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,
Submitted by Seb (not verified) on November 13, 2008 - 5:48pm.
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.
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,
Submitted by Anonymous (not verified) on November 13, 2008 - 7:23pm.
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!
Submitted by Jeff Schuler (not verified) on March 23, 2009 - 5:49am.
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,
image flicker in IE 6
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!