İlk  bakışta normal bir resim gibi görünen  demo  örneği aslında numarasız yada ileri geri  butonları  olmayan bir manşet  sistemi. Tek  bir  resim gibi duran görüntünün üstüne mouse gittiği an mousun  hemen yanında  sürekli  resmin çerçevesinde mouseyi takip  eden bir Next yazısı beliriyor.  Resmin üzerine tıkladığınızda ise  sonraki resim çıkıyor. İşin kötü tarafı  ilerlediğiniz resmi geri getirmek için bir geri  butonu  yok daima ileriye bakıyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosyası : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Stil :

	<style>
		.container {
			position: relative;
			width: 480px;	
			height: 360px;
			margin: 0 auto;
		}

		.container img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}

		.container span {
			position: absolute;
			top: 20px;
			left: 10px;	
			width: 440px;
			padding: 10px;
			color: #FFF;
			background: url('bg.png');
			z-index: 11;
		}

		.container span a {
			float: right;
			color: #FFF;
			font-size: 12px;
		}

		.tooltip {
			position: absolute;
			display: none;
			padding: 3px 10px;
			background: #fff;
			color: #222;
			border: 1px solid #CCC;
			font-family: Arial;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 1px;
			z-index: 11;
		}
	</style>

JavaScript :

	<script language="javascript">
		$(document).ready(function() {

			$(".container img:first-child").addClass('last');

			$(".container img").click(function() {
				$(this).fadeOut('normal', function() {

					if ( $(this).hasClass('last') ) {
						$("img", $(this).parent()).css('z-index', 10);

					} else {
						$(this).css('z-index', 9)
					}

					$(this).show();	
				});
			});

			// show tooltip when the mouse is moved over container
			$(".container").mouseenter(function() {
				$(".tooltip", this).show();

			}).mousemove(function(e) {
				// update position
				$(".tooltip", this).css({
					'top'	: e.pageY - this.offsetTop + 8,
					'left'	: e.pageX - this.offsetLeft + 15
				});

			}).mouseleave(function() {
				$(".tooltip", this).hide();

			}).append('<div class="tooltip">Next</div>');

			// hide tooltip when the mouse is moved over caption
			$(".container span").mouseenter(function() {
				$(".tooltip", $(this).parent()).hide();

			}).mouseleave(function() {
				$(".tooltip", $(this).parent()).show();
			});

		});
	</script>

• Body etiketleriarasına eklenmesi gereken bölüm.

Html :

		<div class="container">
			<img src="bmw_3.jpg" alt="" />
			<img src="bmw_2.jpg" alt="" />
			<img src="bmw_1.jpg" alt="" />
			<span>BMW Gran Turismo <a href="javascript:;">Read more</a></span>
		</div>

		<p>&nbsp;</p>

		<div class="container">
			<img src="lamborghini_3.jpg" alt="" />
			<img src="lamborghini_2.jpg" alt="" />
			<img src="lamborghini_1.jpg" alt="" />
			<span>Lamborghini Gallardo LP550-2 <a href="javascript:;">Read more</a></span>
		</div>