[besimler]

Selam arkadaşlar, onmouse over ve div'i birleştirerrek resmin üzerine gidildiğinde oluşan bir pençerede o resmin büyük ve orjinal halini gösterebiliyorum. Fakat 100 tane thumbnail resim bulunan bir websayfasında bu iyi çalışmıyor. Nedeni ise üzerine gidilsede gidilmesede küçük resimlerin büyüklerini arka planda yüklüyor. Bu da daha fazla trafik ve yavaş açılan web sayfası demek oluyor. Benim istediğim resmin üzerine gittiğim zaman resmin büyük halini o an yüklemeye başlasın.

CSS:

.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 */
}

Kullanımı;

<a href=xxx class=\"thumbnail\"><img width=80 src=photos/thumbnail_$resim211 border=0>
<span>
<img src=photos/$resim211 />
</span>
</a>

Bu çalışmanın bir benzeri yine forumda verildi;

onmouseover ile div

[MaviKartaL]

Sayfanın head tagları arasına yerleştirdiğin script kodundaki function preLoadImages(.....) bölümünü kaldırman gerekli.

.... olarak bırakdığım yerlerde arka planda yüklenen resimlerin isimleri bulunur.

[besimler]

Fakat script gullanmadım... Sadece CSS...

[Dhilgul]

sayfanın örnek halini görmemize izin verirsen daha yardımcı olabiliriz..

[besimler]

Sayfada verdiğim kodlar dışında başka kod yok arkadaşlar sadece HTML ye CSS i eklerseniz HTML sayfasında nasıl çalıştığını görebilirsiniz verdiğim kodlarla.