Best Image Replacement Technique

Posted by Josh Stodola on Stack Overflow See other posts from Stack Overflow or by Josh Stodola
Published on 2009-08-04T03:54:33Z Indexed on 2010/04/14 13:13 UTC
Read the original article Hit count: 347

Filed under:

css

|

image-replacement

What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure...

 <div id="menu">
   <ul>
     <li><a href="#">Test</a></li>
     <li><a href="#">Tester</a></li>
     <li><a href="#">Testing Testing</a></li>
   </ul>
 </div>

What is the best way to replace the text with a background image using CSS only?

I am currently using this...

text-indent: -9999px;

But, it fails with CSS on, and images off.

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about image-replacement

Best Image Replacement Technique

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the best (as in cross-browser) technique to do image replacement in CSS? I am using sprites to do my navigation, but I want the markup to remain SEO friendly. Given the following HTML structure... <div id="menu"> <ul> <li><a href="#">Test</a></li> … >>> More
Is this a "valid" css image replacement technique?

as seen on Stack Overflow - Search for 'Stack Overflow'
I just came up with this, it seems to work in all modern browsers, I just tested it then on (IE8/compatibility, Chrome, Safari, Moz) HTML <img id="my_image" alt="my text" src="images/small_transparent.gif" /> CSS #my_image{ background-image:url('images/my_image.png'); width:100px; … >>> More
jQuery animate on an image replacement

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey All Hope you can advise I would like to add some simple fade in out of an image replacement which I have hooked into a select menu.ie, $("#vehicle").change(function(){ var selected = $(this).val(); $("#selectedVehicle").attr('src', '/assets/images/mini/'+selected+'.png'); }); <img… >>> More
Image replacement with throbber inside webview - Android

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the best way of replacing an image with a throbber image inside webview? onclick is responses slow inside webview... >>> More
Image Replacement (JS/JQuery) working in IE but not FF

as seen on Stack Overflow - Search for 'Stack Overflow'
I have tried multiple solutions for replacing broken images (both JS & jQuery) and all work perfectly with IE but not in FF, is there a reason for this? Are images handled differently in FF that may cause this? JQuery Example: $("img").error(function(){ $(this).unbind("error").attr("src"… >>> More