image fading to other images, slideshow, flash replacement, etc....

I've looked and looked for the past 2 days for a solution to this problem. Attached is picture to a site I'm doing for a family member and they would like the top part, the part I highlighted in the red box to be a slideshow type header that will show different pictures of dogs. I thought I had it fiugred out but it never worked for me. This is my CSS and HTML:



css
.container {
background: #FFF url(3.jpg) no-repeat;
border: 1px solid #EEE;
border-color: #EEE #CCC #AAA;
margin: 0 auto;
text-align: left;
width: 600px;
}


html
<div id="container">

<div class="top">
<div class="header">
<h1><a href="../index.html"></a></h1>

</div>

<div class="menu">
<div align="right"><b><a href="../index.html">Home</a></b><b><a href="../services.html">Services</a></b><b><a href="../staff.html">Staff</a></b><b><a href="../faqs.html">FAQs</a></b><b><a href="../clients.html">Clients</a></b> </div>
</div>
</div>



http://i486.photobucket.com/albums/r.../example-1.jpg

Check out this tutorial that uses jquery:

http://www.dynamicdrive.com/dynamici...tentslider.htm