Konu Başlığı: javascript - css ile image gallery sorunu

arkadaşlar http://cssglobe.com/lab/tooltip/02/ adresindeki resim galerisi benzeri bir uygulamayı projeme dahil etmeye çalışıyorum. fakat ufak sorunlarım var
resmin üzerine geldiğinizde (thumb) büyük boyutlu olarak resim (preview) açıyor. ben bunu veritabanı ile dinamik olarak yapıcam, buraya kadar herşey normal sorun yok.

fakat benim istediğim şey, thumb resmin üzerine tıklayınca pictureDetails.ASP isimli bir sayfaya yönlendirmem gerekli.
ama resim galerisi uygulamasının kullandığı kodlar doğrultusunda bunu yapamıyorum.

Kod:

<ul>
<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

stil dosyası

Kod:

img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
}



/*  */

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}

koyu olarak belirttiğim kısımda büyük (preview) resme link veriyor vbe eklediğim JavaScript dosyasında $("a.preview") ile bu resmi yakalıyor.
şimdi buna farklı bir link vermek için ne gibi bir yol izlemem lazım


JavaScript dosyası

Kod:

this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='preview'><img src='"+ this.href +"' alt='image preview' />"+ c +"</p>");								 
		$("#preview")
			.CSS("top",(e.pageY - xOffset) + "px")
			.CSS("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.CSS("top",(e.pageY - xOffset) + "px")
			.CSS("left",(e.pageX + yOffset) + "px");
	});			
};


// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

dinamik olarak veritabanıyla uyumlu çalışacak bildiğiniz başka uygulamalar var mı?

başka bir sistem kullanarak (JavaScript olmadan) sorunu çözdüm arkadaşlar.
bundan sonra benzer problemlere yardımcı olması açısından kodlar ;

stil dosyası

Kod:

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

HTML içinde;

Kod:

<a class="thumbnail" href="pictureDetails.ASP?id=5"><img src="thumnailresim.jpg" border="0" /><span><img src="previewresim.jpg" /><br />Preview'da görünen açıklama</span></a>

web sitesi : http://www.dynamicdrive.com/style/cs...-image-viewer/