Taylan Aktepe

Bir süredir resim galeri ve ariÅŸivi scripti (CMS de denebilir) üzerine çalışıyorum. Bu nedenle resim ve galeriler üzerine yoÄŸun bir araÅŸtırma-karıştıma yapmam gerekti. Sistemde bulunacak bir-iki farklı galeri için yaptığım araÅŸtırmalarda karşıma sürekli JavaScript çıktı. JavaScript bilgim yeterli olmadığı için oldukça zorlandım. Bunun yerine galerileri, yazmaktan çok zevk aldığım CSS ile denemeye kalkıştım. Akışlarına abone olduÄŸum bloglarda ve del.icio.us depomda benzer birkaç örneÄŸe rastladım, bu beni daha çok cesaretlendirdi ve yazmaya koyuldum. Sonuç olarak JavaScripti hiç de aratmayacak mükemmel sonuçlar aldım. Bu iÅŸten o kadar çok zevk almaya baÅŸladım ki, script ile kullanmayacağım birçok çalışma yaptım. Fırsat buldukça da bu fantezilere devam ediyorum. Sonuç olarak bunlardan bazılarını (ilk denemelerimden baÅŸlayarak) burada paylaÅŸmaya karar verdim ve yeni bir seriye baÅŸladım. “CSS ve Resimler”, serisi ile bu çalışmalarımı aktaracağım.

İlk örneğimiz:

Resim albümünüzde şöyle resimler var; 4-5 arkadaşınızla birlikte aynı karedesiniz veya tek bir kareye 2-3 farklı kareyi yerleştirdiğiniz sonradan düzenlenmiş bir resminiz var. Yapmak istediğiniz ise, fare bir arkadaşınızın üzerine geldiğinde ismini veya birkaç cümlelik bir açıklamayı görmek istiyorsunuz. Ya da 2-3 farklı karenin olduğu resimde, fare bir karenin üzerine geldiğinde onunla ilgili kısa bilgiler görmek istiyorsunuz. Yapalım!

Öncelikle yapılmışını TEST edebilirsiniz veya kodlarını İNDİRebilirsiniz.

İlk olarak klasik .html sayfasını oluşturalım. Sayfada iki örnek için birer resim bulunuyor. Bu resimleri .css sayfasında oluşturuyoruz ve .html sayfasında gösteriyoruz. Şu şekilde;

<div id=”t-image”>
<div id=”image-1″>
<dd class=”jdeep”><a href=”#” title=”"><span>Jhonny Deep</span></a></dd>
<dd class=”vlj”><a href=”#” title=”"><span>Vanesaa Paradise<br /> Lîlly-Rose Melody<br /> Jack</span></a></dd>
<dd class=”vjj”><a href=”#” title=”"><span>Vanesaa Paradise<br /> Jhonny Deep<br /> Jack</span></a></dd>
</div>
<div id=”image-2″>
<dd class=”apacino”><a href=”#” title=”"><span>Al Pacino<br />(Michael)</span></a></dd>
<dd class=”mbrando”><a href=”#” title=”"><span>Marlon Brando<br />(Don Vito)</span></a></dd>
<dd class=”jcaan”><a href=”#” title=”"><span>James Caan<br />(Santino)</span></a></dd>
<dd class=”jcazale”><a href=”#” title=”"><span>John Cazale<br />(Fredo)</span></a></dd>
</div>
</div>

Resimler image-1 ve image-2 etiketlerinin arkaplan resimleri ve bunları .css dosyasında belirttim. Arkaplanların üzerine ise <dd> etiketlerini, bunların içinede <a> ve <span> etiketlerini ekledim. Şu haliyle pek birşeye benzemediler. Çünkü asıl işlemler .css dosyasında bulunuyor. Öncelikle arkaplanlardan bir tanesi ki diğeride bunun aynısı;

#image-1 {
width:391px;
height:391px;
float:left;
margin:10px;
border:5px solid #fff;
background:url(jdeep.jpg) no-repeat;
}

ÅŸimdi ise <dd> etiketlerinden bir tanesi:

/* Jhonny Deep */
dd.jdeep {
width:150px;
height:391px;
float:left;
}
dd.jdeep a {
position:absolute;
width:150px;
height:391px;
text-decoration:none;
}
dd.jdeep a span {
display:none;
}
dd.jdeep a:hover {
position:absolute;
width:190px;
height:391px;
background:transparent url(jdeep.jpg) top left no-repeat;
top:25px;
left:80px;
}
dd.jdeep a:hover span {
width:180px;
display:block;
text-indent:0;
vertical-align:bottom;
color:#000;
background-color: #ccc;
font-weight:bold;
position:absolute;
border:1px solid #666;
top:100%;
margin:0 -1px;
padding:5px;
}

Yukarıdaki işlemi her kare için veya kişi için farklı oluştururuyoruz. Diğerlerini indirilen kodlardan görebilirsiniz.

Ne yaptık? <dd> etiketi oluşturduk ve içinde bulunan <a> etiketi içinde ayrı bir stil oluşturduk. Daha sonra ise <span> etiketi içindeki metni gizledik (display:none). Bu işlemden sonra ise, farenin resim üzerine geldiği durumu işledik. Yani arkaplan olarak yine aynı resmin bir bölümünü biraz öne kaydırdık, gizlediğimiz metninde hemen bu resim parçasının altında gösterilmesini sağladık. Hepsi bu kadar!

Resim olarak sevdiğim iki kareyi kullandım; ilki, Jhonny Deep ve Ailesi. Diğeri ise Corleone ailesi.

Kendinize göre değişiklikler yaparak farklı birçok alternatif elde etmeniz mümkün. Şimdiden İyi eğlenceler!