Resimlerin üzerine fare ile gelindiğinde açıklama gösterilmesi, resmin tanımladığı konunun veya makalenin bağlantısının verilmesi son dönemlerde oldukça sık kullanılan bir özellik…

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

UYGULAMANIN MANTIĞI

Örneğimize ait anlatıma geçmeden önce biraz işin mantığını anlatmak istiyorum. Böylelikle uygulamayı ve yapımını daha kolay kavrayabiliriz.

Aslına bakarsanız yaptığımız iş çok basit. Css ile oluşturduğumuz bir sınıf içine resmimizi gösterecek olan Xhtml kodunu yazıyoruz. Bu kodun bitiminde bir Span etiketi açarak resmimize ait tanımlamayı yazıyor ve Span etiketimizi kapatıyoruz. (Span etiketimizi Css kodları içinde display:none; değeriyle görünmez hale getireceğiz)

Xhtml kodumuzu bu şekilde yazdıktan sonra Css ile resim gösterimi ve tanımlaması için ayrı ayrı kullanacağımız Xhtml etiketlerinin stillerini tanımlıyoruz. Span ve diğer sınıfların Margin ve Padding değerlerini uygulamamıza uygun şekilde veriyoruz. (Bu da tasarımın matematiği sanırım :)

İşin jQuery boyutunda ise geriye Css kodlarımızda görünmez yaptığımız Span etiketini .Resim isimli sınıf üzerine gelince görünür hale getirmek kalıyor. jQuery’nin slideDown ve slideUp efektlerini açıklama gösterimi için kullanıyoruz. Çok uzun bir açıklama oldu sanırım, isterseniz hemen kodlarımızı yazalım ve uygulamamızı hayata geçirelim.

1. ADIM: XHTML KODLARININ YAZIMI
Aşağıdaki kodları boş bir metin editöründe açarak yazalım ve index.html olarak kaydedelim.

<div id="gosterimalani">
<div class="resim">
<a href="#"><img src="resim1.gif" alt="" /></a>
<span>Resim 1'e ait açıklama</span>
</div>

<div class="resim">
<a href="#"><img src="resim2.gif" alt="" /></a>
<span>Resim 2'ye ait açıklama</span>
</div>

<div class="resim">
<a href="#"><img src="resim3.gif" alt="" /></a>
<span>Resim 3'e ait açıklama</span>
</div>

<br style="clear:both" />
</div>

Xhtml kodlarında önce Gösterim alanı isimli bir id tanımladık. Bu id içerisinde resimlerimizin gösterileceği sınıf olan .resim sınıf yer alacak. Div class=”resim” alanından sonra resmimizin Xhtml kodunu yazıyoruz. Sonrasında ise bir Span etiketi açarak açıklamamızı yazıyoruz.

2. ADIM: CSS KODLARININ YAZIMI

#gosterimalani {
width:650px;
margin:0 auto;
background:#222;
border:1px solid #333;
padding:20px;}

.resim {
float:left;
padding-right:10px;
display:inline;}

span {
display:none;
font:12px/20px arial, verdana, sans-serif;
background:#000;
color:#fff;
height:36px;
margin:-50px 2px 4px 2px;
position:relative;
padding:4px;
width:192px
}

.resim a img {border:2px solid #444}
.resim a:hover img {border:2px solid #999}

Css kodlarında dikkat edeceğimiz en büyük öge Span etiketine vermiş olduğumuz stiller. Span etiketinin uygulamamıza bağlı olarak aldığı Margin değerlerine dikkatinizi çekmek istiyorum. Span etiketine vermiş olduğumuz eksi margin değeri görünürlüğün resimler üzerine tam ve uygun olarak yansımasını sağlayacak biçimde ayarlandı. Margin değerleri dışında, arkaplan, metin rengi, yükseklik gibi değerleri de tanımladık.

3. ADIM: jQUERY KODLARININ YAZIMI

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
	$(".resim").hover(
		function () {
		$("span", this).slideDown();
		},
		function () {
		$("span", this).slideUp();
		}
	);
});
</script>

jQuery kodlarında yaptığımız şey ise oldukça basit. Resim isimli Css sınıfının üzerine fare ile gelindiğinde Span etiketinin slideDown efekti ile gösterilmesini sağlıyoruz. Aksi durumda ise Span etiketimiz slideUp efekti ile gözden kayboluyor. Gördüğünüz gibi jQuery kodumuz oldukça kısa ve kolay yazılabilir. Zaten jQuery’nin asıl amacı da bu değil mi? Az kod çok iş! (Dilerseniz slideDown ve slideUp efektlerine milisaniye cinsinden zaman ataması yapabilir veya fast, slow gibi açılma hızı tanımlamaları ekleyebiliriz. Ben örneğimizde kodları şişirmemek adına bunları kullanmadım, dilerseniz siz .slideDown(“fast”); gibi bir değer vermeyi tercih edebilirsiniz)

Örnek uygulamamızda göreceğiniz gibi vermiş olduğumuz Css değerleri ışığında resimler üzerine geldiğinizde resim açıklamalarımız aşağıdan yukarı görünür hale geldi. Oldukça kolay kodlanabilen bu uygulama ile resim bağlantılarınızı daha da renklendirebilirsiniz. Sorularınız veya konuya ilişkin eklemeleriniz olursa bunları yorumlarımla cevaplamaktan büyük zevk alacağım.

Umarım sizler için faydalı ve güzel bir anlatım olmuştur. Bir başka makalemizde görüşmek üzere…

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

Öncelikle bu uygulamayı bir blog sitesinde kullanacaksanız header.php dosyanızı açın ve aşağıdaki kodları girin. Şayet bunu html/css bazlı bir sitede kullanacaksanız head etiketinin bitiminden önce aşağıdaki kodu yazın.

<script type=”text/javascript”>
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2

if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>

Bu kodu yazdıktan sonra resim bağlantılarımızı göstermek istediğimiz alana ise aşağıdaki kodu yazıyoruz. (Blog sitelerinde sidebar.php dosyası içine bu kodu yerleştirebilirsiniz)

• <div class=”baglantikutusu”>
  <a href=”whatever.html”><img src=”resminiz.gif” style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onmouseover=”makevisible(this,0)” onmouseout=”makevisible(this,1)” alt=”" /></a>
  </div>

Böylelikle ilgili alandaki resimleriniz soluk bir şekilde görünecek ve verdiğiniz link özelliği nedeniyle fare ile üzerine gelince asıl rengini alacak. Bu işlemi yaparken ben bağlantıyı bir div sınıfı içine aldım. Bu sınıfı siz kendinize göre de değiştirebilirsiniz. (div sınıfı içine almadığınız linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (bağlantı vereceğiniz resimlerin) aynı ebatta olması bu uygulamanın daha kolay ve daha güzel olmasını sağlar. (Tıpkı verdiğim örneklerdeki gibi)

Böylece istediğiniz kadar bağlantıyı belli bir alanda gösterebilir ve ziyaretçilerinize farklı bir görünüm sunabilirsiniz. Umarım faydalı olmuştur… (Şayet bu uygulamayı bir blog üzerinde uygulayan arkadaşlar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)