Image sprite IN a li

HTML & CSS
1

So, I have an inline list that I’m working with. My problem is that I want to use an image in the list and change the image when it is hovered over. I thought that I could do a sprite for this, but damn I can’t @$#^^$ get it to work.

So, I’m wondering if I should be doing a sprite here or an image rollover???


HTML code

<div id=“MainNavigation”>

	&lt;ul id="MainNav"&gt;

		&lt;li&gt; &lt;a href="#"&gt;About us&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Classes&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Personal Training&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt; &lt;a href="#"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a href="#"&gt;Contact us&lt;/a&gt; &lt;/li&gt;

        &lt;li&gt; &lt;a href="#"&gt;&lt;img src="IMAGES/Mixed_Martial_arts.png" width="220" height="85" alt="Mixed Martial Arts" /&gt;&lt;/a&gt;&lt;/li&gt;

        &lt;li&gt; &lt;a href="#"&gt;&lt;img src="IMAGES/TRX_training.png" width="92" height="65" alt="Mixed Martial Arts" /&gt;&lt;/a&gt;&lt;/li&gt;



        &lt;li&gt; &lt;a class="SpinClass" href="#"&gt;&lt;img src="IMAGES/SPIN_CLASSES.png" width="92" height="65" alt="Spin class"  /&gt;&lt;/a&gt;
        &lt;/li&gt;



	&lt;/ul&gt;

</div> <!–MainNavigation–>


CSS

#MainNav li a img.SpinClass:hover {
background-image:url(IMAGES/TRX_training.png);

}

2

Check out this linkl for a possibility:

http://www.websitecodetutorials.com/code/css-nav-menus/css-sprites.php

3

Thanks this solved it

HTML
<li> <a class=“SpinClass” href=“#”>Spin Class</a></li>

CSS

.SpinClass {
display:inline-block;
margin-top:-50px;
width: 101px;
height: 70px;
background:url(IMAGES/SPIN_CLASSES.png) 0 0;
text-indent: -99999px;
}

.SpinClass:hover {
background-position: -100px 0px;
}