Hi,

This is what I have at present:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">

		function theRotator() {
			//Set the opacity of all images to 0
			$('.rotator ul li').css({opacity: 0.0});
			
			//Get the first image and display it (gets set to full opacity)
			$('.rotator ul li:first').css({opacity: 1.0});
				
			//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
			setInterval('rotate()',6000);
			
		}
		
		function rotate() {	
			//Get the first image
			var current = ($('.rotator ul li.show')?  $('.rotator ul li.show') : $('.rotator ul li:first'));
		
			//Get next image, when it reaches the end, rotate it back to the first image
			var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator ul li:first') :current.next()) : $('.rotator ul li:first'));	
			
			//Set the fade in effect for the next image, the show class has higher z-index
			next.css({opacity: 0.0})
			.addClass('show')
			.animate({opacity: 1.0}, 1000);
		
			//Hide the current image
			current.animate({opacity: 0.0}, 1000)
			.removeClass('show');
			
		};
		
		$(document).ready(function() {		
			//Load the slideshow
			theRotator();
		});
		</script>

        <!-- CSS for this block -->
        <style type="text/css">
		.rotate {
			/*position:relative;
			height:345px;
			margin-left: 15px;*/
			/*additional CSS elements*/
			float: left;
			width: 160px;
			height: 215px;
			background-color: #FFFFFF;
			border: 2px solid #0066CC;
			margin: 0px 10px 10px 0px;
			text-align: center;
			overflow: hidden;
			
		}
		/* rotator css */
		.rotate span {
			display: block;
			float:left;
			position:absolute;
		}
		/* rotator image style */	
		.rotate span img {
			border:1px solid #ccc;
			padding: 4px;
			background: #FFF;
		}
		.rotate span.show {
			z-index:500;
		}
		</style>
        <!-- /CSS for this block -->
        
        <div class="rotate">
			<span>
				<a href="/">
					<img border="0" src="http://www.somedomain.com/image1.jpg" width="160" height="160" alt="" class="" />
				</a>
                <a href="/">
					<img border="0" src="http://www.somedomain.com/image2.jpg" width="160" height="160" alt="" class="" />
				</a>
			</span>
			<!--<div onclick="javascript:document.location.href='/';">
				<a href="/">BRANDS</a>
			</div>-->
		</div>
The alignement is out and I simply have two images within that block side by side and nothing is rotating...any thoughts on what I need to do further please?