The fact that you don't know whether the user has images enabled or not is a real problem with
image replacement. You can't hide the existing text if images are disabled as the user will just end up with nothing, the standard way to handle this problem is to keep the text visible and have an image bigger than the text and place the image over the text, if the user doesn't have images they will still see the text. This is only ok if your replacing a header where the image is bigger than the text, but no good for any small images like icons where the text is always going to be bigger.
One way round this is to only add images if your sure the user has images enabled and to keep the text in the HTML flow for screen reader users.
One way of testing for images is to use JavaScript and set a class name on the HTML element if image are enabled/supported, then you can apply styles based on the existence of this class name, using this technique you'll only do image replacement if the user has JavaScript, CSS and Images enabled which is a good thing. If the user doesn't have any of these three you probably don't want to mess with the UI at all.
See the
image replacement test page for some uses.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Image Replacment example</title>
<style type="text/css">
/* styles if images are enabled */
html.img span.enabled {
color:#080;
display:inline;
}
html.img span.disabled {
display:none;
}
span.enabled {
display:none;
}
span.disabled {
color:#f00;
display:inline;
}
/* hide text if images are enebled */
html.img h1 span,
html.img a span span {
display:block;
height:1px;
overflow:hidden;
width:1px;
}
/* add images */
html.img a span.img {
display:inline-block;
height:12px;
overflow:hidden;
width:12px;
}
html.img a.external span.img {
background-image:url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
}
html.img a.doc span.img {
background-image:url(http://pclancey.com/i/btf/doc.png);
}
html.img a.pdf span.img {
background-image:url(http://pclancey.com/i/btf/pdf.png);
}
html.img h1 {
background-image:url(http://pclancey.com/i/btf/h103.png);
height:88px;
width:680px;
}
/* menu styles */
*.menu a {
text-decoration:none;
}
*.menu a:active,
*.menu a:focus,
*.menu a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<h1><span>Beneath the Fold</span></h1>
<p>
Image replacement test:
Can you see an image of a mouse?
<img src="http://news.nationalgeographic.com/news/2009/03/images/090320-new-mouse-picture_big.jpg" height="60" alt="image of a wet mouse" />
<br/>Images seem to be:
<span class="enabled">enabled, using image replacement</span>
<span class="disabled">disabled or can't tell, not using image replacement</span>
</p>
<ul class="menu">
<li><a href="http://google.com" class="external" target="_blank">
External link
<span class="img">
<span>(opens in new window)</span>
</span>
</a></li>
<li><a href="http://google.com" class="doc">
Link to some document
<span class="img">
<span>(Word DOC)</span>
</span>
</a></li>
<li><a href="http://google.com" class="pdf">
Link to some other document
<span class="img">
<span>(PDF)</span>
</span>
</a></li>
</ul>
</body>
<script type="text/javascript">
/*
* set the img class name on the HTML doc
* run this oncontentready, onload or
* at the bottom of the page
*
*/
(function(){
if (!document.getElementsByTagName){return}
var existentimg = new Image;
var html = document.getElementsByTagName('html')[0];
existentimg.onload = function(){
html.className+=' img';
var nonexistentimg = new Image;
nonexistentimg.onload = function(){
html.className=html.className.replace(/\bimg\b/,'');
}
nonexistentimg.src="/nonexistentimg.gif";
}
existentimg.src = (document.images.length)? document.images[0].src : 'http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png' ;
})();
</script>
</html>
