[help] Xhtml: Img Defined In Css How To Add?

How do I add an image inside an anchor ( tag) of a xhtml doc?

Basically, I'm looking to define different themes for a website and although I can switch the rest of the layout and images using different stylesheets, i'm having trouble with the static links to an image inside a navbar that use the tag.

At present, the links are as follows:

<a href="#" id="swap01" class="rollover" title="Swap?"><img src="../../unavailable.html" alt="Swap?" /></a>
<a href="#" id="swap02" class="rollover" title="Swap?"><img src="../../unavailable.html" alt="Swap?" /></a>
<a href="#" id="swap03" class="rollover" title="Swap?"><img src="../../unavailable.html" alt="Swap?" /></a>
<a href="#" id="swap04" class="rollover" title="Swap?"><img src="../../unavailable.html" alt="Swap?" /></a>
<a href="#" id="swap05" class="rollover" title="Swap?"><img src="../../unavailable.html" alt="Swap?" /></a>

I want to change the src of the img tags to point to an id inside th css file, something like this:

<a href="#" id="swap01" class="rollover" title="Swap?"><li id="button01"/></a>
<a href="#" id="swap02" class="rollover" title="Swap?"><li id="button02"/></a>
<a href="#" id="swap03" class="rollover" title="Swap?"><li id="button03"/></a>
<a href="#" id="swap04" class="rollover" title="Swap?"><li id="button04"/></a>
<a href="#" id="swap05" class="rollover" title="Swap?"><li id="button05"/></a>

where button01 - 05 are defined as:

#button01 {
	background-image: url(images/design/1/nav_up_01.jpg);
	width: 116px;                    
	height: 60px;
}

The only problem with the above solution is that li is not allowed to be nested inside the tag in XHTML.

Any ideas?

#209019

So you put the inside the [*].

<ul>
<li><a href="" id="link">TextTextText</a></li>
</ul>

CSS:

#link {
background-image: url(images/design/1/nav_up_01.jpg);
width: 116px;                    
height: 60px;
display: block;
}

#link:hover {
background-image: url(images/design/1/nav_OVER_01.jpg);
}

li {
list-style-image: none;
}

Then you add all the rest of your code. Be aware, that for compatibility with IE, you should only apply :hover to anchors.

Also, if the background of these rollovers is a single colour, you'd be better off using CSS rules to set the colours than using background images. Second point, make sure you're not using images with text on them for links. That's BAD.

Hope this helps, if not, just let us know.

#209123

Thanks for tips Ludge but I decided to go another route using this excellent tutorial:

SimpleBits

and it doesn't invalidate that all important XHTML strict standard.

#209208