Fatih Hayrioğlu anlatımıdır

CSS ile Resim Haritaları(imagemap) yapmak

Resim haritalama işi aslında bizim HTML’den aşina olduğumuz bir konu. Eskiden çok kullanırdık şimdilerde html e-postalarda(mailing) daha ziyade kullanılıyor. Resmin belli noktalarına link verebilmek çok güzel bir işti. Ben daha bu işlere ilk başladığımdaki o zamanlar FrontPage ile yapmaya çalışıyordum bu işleri. Resim haritalarını çözmek 1 haftamı almıştı. Gülermisin ağlarmısın

Biz burada flickr’dakine benzer bir uygulamayı beraber yapacağız. Aslında burada kullanacağımız teknik bildiğimiz göreceli eleman içindeki mutlak elemanın konumlandırması tekniğidir. Resmimizi içeren göreceli konumlandırılmış bir elaman koyup resim üzerinde belirteceğimiz noktalarıda mutlak konumlandıracağız ve bu noktaları farenin üzerine geldiğinde belirtip ilgili açıklamayı göstereceğiz. Flickr’dakine benzer bir görüntü olması için iki fazladan <span> ekleyeceğiz, bunları kaldırada biliriz. 

HTML kodumuzu yazalım

1.   
2. <ul id="foto">  
3. <li class="dexter"><a href="http://www.sho.com/site/dexter/">
4. <span class="dis"><span class="ic"><span class="bilgi">Dexter</span></span></span></a></li>  
5. <li class="html"><a href="http://www.w3.org/TR/REC-html40/"><span class="dis"><span class="ic"><span class="bilgi">HTML 4</span></span></span></a></li>  
6. </ul>  

<ul id="foto">
<li class="dexter"><a href="http://www.sho.com/site/dexter/">
<span class="dis"><span class="ic"><span class="bilgi">Dexter</span></span></span></a></li>
<li class="html"><a href="http://www.w3.org/TR/REC-html40/">
<span class="dis"><span class="ic"><span class="bilgi">HTML 4</span></span></span></a></li>
</ul>

CSS kodunu kademe kademe açıklayarak yazarsak;

Burada resmimizi ul elemanı ardalan resmi olarak atadık. Bu teknikde önemli olan dıştaki kapsayıcı elemanı(ul#foto) göreceli konumlandırıp, fare üzerine geldiğinde resmin etrafını çizip bilgisini göstermek. Bu resimde üzerini çizdiğimiz ve bilgisini gösterdiğimiz elemanlarada(<li class="dexter"> ve <li class="html">) mutlak konumlandırma ile tanımlayıp resmin üzerinde istediğimiz konuma yerleştiriyoruz.

1.   
2. ul#foto{   
3. width: 500px;   
4. height: 331px;   
5. position: relative;   
6. background: url(images/dexter.jpg) no-repeat;   
7. margin: 0;   
8. padding: 0;   
9. list-style: none;   
10. }   

ul#foto{
width: 500px;
height: 331px;
position: relative;
background: url(images/dexter.jpg) no-repeat;
margin: 0;
padding: 0;
list-style: none;
}

Aşağıdaki kodda her bir haritalanacak nesne bir link olduğu için her birine tek tek atamaktansa genel bir tanım ile tüm linkleri mutlak konumlandırıyoruz ve kenar çizgisini tanımlıyoruz.

1.   
2. ul#foto a {   
3. position: absolute;   
4. color: #000;   
5. text-decoration: none;   
6. border: 1px solid transparent;   
7. }   

ul#foto a {
position: absolute;
color: #000;
text-decoration: none;
border: 1px solid transparent;
}

Her bir haritalanacak eleman için genişlik yüksek tanımını yapıyor ve kapsayıcı elemana göre konumunu belirliyoruz. Ayrıca haritalanan elemanların açıklamaları için konumu tanımı ve görünüm tanımlarını yapıyoruz.

Son iki satır kodlar normal css standart kodlamasının dışında, Flickr’daki gibi bilgi kutusunun köşelerini yuvarlamak için tanımlar yaptık. Firefox için -moz-border-radius: 3px; Safari ve Google Chrome için  -webkit-border-radius: 3px; tanımlarını yaptık. Internet Explorer kullanıcıları için şimdilik bir çözüm yok.

1.   
2. ul#foto .dexter a {   
3. width: 110px;   
4. height: 175px;   
5. top: 25px;   
6. left: 60px;   
7. }   
8. ul#foto .html a {   
9. width: 50px;   
10. height: 80px;   
11. top: 195px;   
12. left: 408px;   
13. }   
14. ul#foto a .bilgi {   
15. position: absolute;   
16. bottom: -25px;   
17. width: 100%;   
18. padding: 2px;   
19. background-color:#ffc;   
20. text-align: center;   
21. left: -30000px;   
22. font:11px Arial, Helvetica, sans-serif;   
23. margin-left: -60px;   
24. -moz-border-radius: 3px;   
25. -webkit-border-radius: 3px;   
26. }   

ul#foto .dexter a {
width: 110px;
height: 175px;
top: 25px;
left: 60px;
}
ul#foto .html a {
width: 50px;
height: 80px;
top: 195px;
left: 408px;
}
ul#foto a .bilgi {
position: absolute;
bottom: -25px;
width: 100%;
padding: 2px;
background-color:#ffc;
text-align: center;
left: -30000px;
font:11px Arial, Helvetica, sans-serif;
margin-left: -60px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

Amacımız Flickr tipi bir resim haritası oluşturmak olduğu için, iki kenar çizgisi tanımı yapmak için iki adet <span> etiketi yazdık ve bunlara dış(.dis) ve iç(.ic) sınıfları tanımladık. Tanımladığımız her bir dis ve ic nesnesine haritaladığımız nesnelerin genişlik ve yükseklerinin 2px daha düşük değerlerini vererek üst üste binmelerini önledik ve görünümünü düzenlemiş olduk. Eğer istersek bu <span> etiketlerini kaldırabiliriz, daha sade bir görünüm olur.

1.   
2. ul#foto a .dis, ul#foto a .ic {   
3. display: block;   
4. }   
5. ul#foto .dexter a .dis {   
6. width: 108px;   
7. height: 173px;   
8. }   
9. ul#foto .html a .dis {   
10. width: 48px;   
11. height: 78px;   
12. }   
13. ul#foto .dexter a .ic {   
14. width: 106px;   
15. height: 171px;   
16. }   
17. ul#foto .html a .ic {   
18. width: 46px;   
19. height: 76px;   
20. }      

ul#foto a .dis, ul#foto a .ic {
display: block;
}
ul#foto .dexter a .dis {
width: 108px;
height: 173px;
}
ul#foto .html a .dis {
width: 48px;
height: 78px;
}
ul#foto .dexter a .ic {
width: 106px;
height: 171px;
}
ul#foto .html a .ic {
width: 46px;
height: 76px;
}

Fare haritalanan alanların üzerine gelince çıkacak bilgilendirme alanının yerini belirliyoruz. - 3000px ile görüntüden çıkardığımız bilgi alanını görünür yapıp istediğimiz yere yerleştirdik.

1. ul#foto a:hover .bilgi { left: 60px; }  

ul#foto a:hover .bilgi { left: 60px; }

Tüm resmin üzerine gelindiğinde ve haritalanan alanların üzerine gelindiğinde kenar çizgi renklerini değiştirerek farklı bir görünüm kazandırıyoruz.

1.   
2. ul#foto a:hover {   
3. border-color: #d4d82d;   
4. }   
5. ul#foto:hover a .dis, ul#foto a:hover .dis {   
6. border: 1px solid #000;   
7. }   
8. ul#foto:hover a .ic, ul#foto a:hover .ic {   
9. border: 1px solid #fff;   
10. }   

ul#foto a:hover {
border-color: #d4d82d;
}
ul#foto:hover a .dis, ul#foto a:hover .dis {
border: 1px solid #000;
}
ul#foto:hover a .ic, ul#foto a:hover .ic {
border: 1px solid #fff;
}

Sonuçta görsel ve işlevsel olarak çok güzel bir uygulama elde ettik. Uygulanabileceği yerler kısıtlıda olsa, uygulandığın da güzel bir görünüm ve işlevsel bir sonuç elde edeceğimiz bu uygulama bizi birçok avantaj sağlar.

Örnek uygulamayı görmek için tıklayınız