Ortadan Ekrana Genişleyen Kare

Bu dersimizde Javascript yardımı ile div katmanı kullanarak ortadan ekrana doğru genişleyen kare yapalım.

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>

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

emeğe saygı herzaman olmalı eline sağlık
saolasın dostum eline sağlık
javadan anlamam ama bana sanki burada bi eksiklik var gibi geliyo.. <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> burada ('a','b','c') düzgün hali burada ('b','a','c') b den sonra a geliyo ve bunu anlamadım burada ('c','a','b') c den sonra a ve be gelmesi normal, ikincide b,a,c olmasının mantığını anlamadım . elimde bu kodlarla 10 tane div ve a,b,c,d,e,f,g,h,i,j,
sıralama yapmam gerek ve burada mantıksal olarak işin içinden çıkamıyorum . saksı yani kapasitem yetmiyo. hani desek bir sıra atlayıp öyle devam edeceğim ama buradaki sıralam beni çıkmaza soktu. hadi çık işin içinden.
Sayın Osman Durmuş , bu kod arayıp ta bulamadığım, ve sonunda vesilenizle bulduğumuz çok müthiş decerecede işime yarayan bir kod. çok çok çok teşekkür ederim. Hakkınızı helal edin, çünki hazırladığımız wb sitesinde kullandık.
ben de kendime site hazırlıyorum yardımlarınız için teşekkür edrim

Yukarı Git