Ortadan Ekrana Genişleyen Kare

Ortadan Ekrana Genişleyen Kare 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: <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.

<html> <head> <script> function aha(id1,id2,id3){     document.getElementById(id1).style.visibility="visible";     document.getElementById(id2).style.visibility="hidden";     document.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>

 

                Grafik / Web Tasarım              

Döküman Arama

Başlık :

Kapat