Slideshow nav

[davy_yg]

Hello all,

I am using jquery for the slideshow: Innovation Web

<style type="text/css">
#slideshow { left: 0; float: left; margin: 10px; z-index: 0;}
#nav { width: 270px; margin: 0 0 0 610px; float: left; position: absolute; z-index: 1;}
#nav li { position:relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav1.jpg') no-repeat top; z-index:9;}
#nav a { width: 300px; height: 67px; padding: 3px; display: block; border: 0px solid #ccc;}
#nav li.activeSlide a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik1.jpg') no-repeat top; z-index:9;}
#nav a:focus { outline: none;}
#nav img { border: none; display: block;}
pre { clear: left }
</style>



<div id="navcontainer">
<div id="demos">
    <div id="slideshow" class="pics">
        <img src="images/banner1.jpg" alt="banner1" width="600" height="200" />
        <img src="images/banner2.jpg" alt="banner2" width="600" height="200" />
        <img src="images/banner3.jpg" alt="banner3" width="600" height="200" />       
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>

There is only one problem with this method, I would like each slideshow nav bar (Web Design & Dev, SEO, Social Network) to have different item icon. If I am using nav li like now, I only allowed to use one jpg file for the li background. Any other alternatives ?

Thanks before.

[mattster]

Try using this:

/* HTML */

<li class="nav1"><a href="">Link</a></li>
<li class="nav2"><a href="">Link</a></li>

/* CSS */

#nav li {background:no-repeat top;}
#nav li .nav1 {background: url('images/banner nav1.jpg');}
#nav li .nav2 {background: url('images/banner nav2.jpg');}