resimharitalama(imegemap)
Haritalama aslında bizim gördüğümüz ve otomatik olarak kullandığımız bir yöntem.Facebook'da , Netlog'da resim koyunca üstünde arkadaşlarınızın isimlerin felan belirtdiğiniz şeyler.Peki bunu CSS ile nasıl mı yapacağız.O zaman anlattıklarımızı güzelce dinleyin
Resmimizin üzerine bir nokta koyup resim üzerinde belirteceğimiz noktalarıda mutlak konumlandıracağız ve bu noktalar fare ile gösterildiğinde ilgili acıklama görünecek.
HTML KODUMUZ
<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.
ul#foto{
width: 500px;
height: 331px;
position: relative;
background: url(images/dexter.jpg) no-repeat;
margin: 0;
padding: 0;
list-style: none;
}
