Hi,
I'd like to replace the text ("Word 1 Word2 Word3 Word4") in the following HTML with images, using CSS. I'd like the images to appear in-line horizontally too, as the text would.
<div id="aSentence">
<p>
<span id="word1">Word1  </span>
<span id="word2">Word2  </span>
<span id="word3">Word3  </span>
<span id="word4">Word4  </span>
</p>
</div>
I've read through and tried a couple of the techniques from mezzoblue and some other sites, but I'm coming to the conclusion that those techniques seem to require that the text's span is surrounded by a or another element type that will make the words not line up horizontally.
Any ideas on how I can achieve this goal? I'd like to (if possible) make the solution 'accessible' to screenreaders etc.
Thanks very much,
Prembo.
PS: I tried to implement some of the techniques - none of them worked properly: TextReplacement.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Text Replacement by Image using CSS</title>
<style type="text/css" title="currentStyle" media="screen">
@import "TextReplacement.css";
</style>
</head>
<body id="bodyId">
<div id="centerContainer">
<h1><span>Comparison of Various Techniques</span></h1>
<p class="noteText">(NOTE: only text "Word1" is being replaced by image)</p>
<div id="mainBodyContainer">
<div class="techniqueContainer">
<h2>Technique 1: FIR</h2>
<ul id="t1List">
<li id="t1w1"><span>Word1. </span></li>
<li id="t1w2"><span>Word2. </span></li>
<li id="t1w3"><span>Word3. </span></li>
<li id="t1w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 2: Radu</h2>
<ul id="t2List">
<li id="t2w1"><span>Word1. </span></li>
<li id="t2w2"><span>Word2. </span></li>
<li id="t2w3"><span>Word3. </span></li>
<li id="t2w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">All disapppear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 3: Rundle</h2>
<ul id="t3List">
<li id="t3w1"><span>Word1. </span></li>
<li id="t3w2"><span>Word2. </span></li>
<li id="t3w3"><span>Word3. </span></li>
<li id="t3w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">No effect - image and text visible.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 4: Leahy/Langridge</h2>
<ul id="t4List">
<li id="t4w1"><span>Word1. </span></li>
<li id="t4w2"><span>Word2. </span></li>
<li id="t4w3"><span>Word3. </span></li>
<li id="t4w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Image appears above Word1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 5: Dwyer</h2>
<ul id="t5List">
<li id="t5w1"><span>Word1. </span></li>
<li id="t5w2"><span>Word2. </span></li>
<li id="t5w3"><span>Word3. </span></li>
<li id="t5w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely. Same as Technique 1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 6: Jason</h2>
<div id="t6List" class="borderContainer">
<span id="t6w1">Word1. </span>
<span id="t6w2">Word2. </span>
<span id="t6w3">Word3. </span>
<span id="t6w4">Word4. </span>
</div>
<p class="techniqueComment">Same as Technique 3 - Rundle.</p>
</div>
</div>
</div>
</body>
</html>
And the CSS File: TextReplacement.css
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}
#centerContainer {
margin-left: auto; /* centres container */
margin-right: auto; /* centres container */
margin-top: 18px;
}
#mainBodyContainer {
width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
font-size: 1.8em;
font-weight: bold;
}
#mainBodyContainer h2{
font-size: 1.2em;
font-weight: bold;
font-style: italic;
color: green;
}
div.techniqueContainer{
text-align: center;
margin-bottom: 30px;
}
p.techniqueComment{
font-size: 0.5em;
font-weight: normal;
font-style: italic;
color: red;
}
p.noteText{
font-size: 1em;
font-weight: normal;
font-style: italic;
color: blue;
}
#mainBodyContainer ul{
list-style: none;
border: 1px solid #820000;
}
#mainBodyContainer ul li{
display: inline;
}
/* TECHNIQUE 1: FIR */
li#t1w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t1w1 span {
display: none;
}
/* TECHNIQUE 2: Radu */
li#t2w1 {
width: 2250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png) top right;
margin: 0 0 0 -2000px;
}
/* TECHNIQUE 3: Rundle */
li#t3w1 {
width: 250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png);
text-indent: -9999px;
}
/*TECHNIQUE 4: Leahy/Langridge. */
li#t4w1 {
width: 250px;
padding: 61px 0 0 0;
height: 0;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat;
overflow: hidden;
}
/*TECHNIQUE 5: Dwyer. */
#t5{
}
#t5List{
list-style: none;
border: 1px solid #820000;
}
#t5List li{
display: inline;
}
li#t5w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t5w1 span{
display: block;
width: 0;
height: 0;
overflow: hidden;
}
/* TECHNIQUE 6: Jason */
li#t6w1 {
}
#t6w1{
text-indent: -5000px;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat 0 0;
overflow: hidden;
}