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