Bu dersimizde Javascript yardımı ile div katmanı kullanarak ortadan ekrana doğru genişleyen kare yapalım.
3 tane div katmanımız var diyelim. Bunların ilk baştaki görünürlükleri "hidden" yani gizli olsun. Linklere "onclick" özelliği verirken:
şeklinde link yerine # koyarsak çağırdığımız fonksiyonun atadığı değere gider.
Burada fonksiyonlardan da söz edeyim.
"aha" adlı fonksiyonumuz 3 tane değer alıyor. Fonksiyonumuzu çağırırken (aha('a','b','c') divlere atadığımız id'leri gönderiyoruz. Id'ler arasına ' ' koyarsak işlem sırasını belirtmiş oluruz, yani önce a id'si gidecek ve visible(görünen) olacak diğer ıd'ler hidden (gizli)olacak anlamına gelir.
Fonksiyonun içeriğine bakarsanız, anlatmak istediğimi daha net görebilirsiniz. Javascript mantığını bilen arkadaşlar açısında anlama problemi olmayacaktır.
3 tane div katmanımız var diyelim. Bunların ilk baştaki görünürlükleri "hidden" yani gizli olsun. Linklere "onclick" özelliği verirken:
Kod:
<a href="#" onclick="aha('a','b','c')">SGH 200</a>şeklinde link yerine # koyarsak çağırdığımız fonksiyonun atadığı değere gider.
Burada fonksiyonlardan da söz edeyim.
"aha" adlı fonksiyonumuz 3 tane değer alıyor. Fonksiyonumuzu çağırırken (aha('a','b','c') divlere atadığımız id'leri gönderiyoruz. Id'ler arasına ' ' koyarsak işlem sırasını belirtmiş oluruz, yani önce a id'si gidecek ve visible(görünen) olacak diğer ıd'ler hidden (gizli)olacak anlamına gelir.
Fonksiyonun içeriğine bakarsanız, anlatmak istediğimi daha net görebilirsiniz. Javascript mantığını bilen arkadaşlar açısında anlama problemi olmayacaktır.
Kod:
<html>
<head>
**********
function aha(id1,id2,id3){
********.getElementById(id1).style.visibility="visible";
********.getElementById(id2).style.visibility="hidden";
********.getElementById(id3).style.visibility="hidden";
}
</script>
</head>
<body>
<a href="#" onclick="aha('a','b','c')">SGH 200</a><br>
<a href="#" onclick="aha('b','a','c')">SGH 300</a><br>
<a href="#" onclick="aha('c','a','b')">SGH 900</a>
<div id="a" style="position:absolute;width:150;height:200;left:100;top:15;visibility:hidden">
Samsung SGH 200<br>
Bulutudu var<br>
Radyosu var<br>
Kızılötesi bile var
</div>
<div id="b" style="position:absolute;width:150;height:200;left:100;top:15;visibility:hidden">
Samsung SGH 300<br>
Bulutudu yok<br>
Radyosu var<br>
Kızılötesi bile var
</div>
<div id="c" style="position:absolute;width:150;height:200;left:100;top:15;visibility:hidden">
Samsung SGH 900<br>
Bulutudu yok<br>
Radyosu yok<br>
Kızılötesi bile yok
</div>
</body>
</html>