Bu dersimizde
Css ile üsteki gibi bir İmageMap yapıcağız aslında eskiden bu sistem daha cok
html ile kullanılırdı ama
css ile daha hoş olduğundan
css de anlatıyorum.
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 Kodumuz :
Kodları Tek Tek anlatımla yazıyorum.
|
|
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.
|
|
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.
ayrıca resimdekine benzesin diye kenarlığını oval laştırıyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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 etiketi yazdık ve bunlara dış(.dis) ve iç(.ic) sınıfları tanımladık.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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.
|
|
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.
|
|
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;
}
|
İşlemimiz bu kadar : ) bir sonraki dersimizde görüşmek üzere..
Hiç yorum yok:
Yorum Gönder