bunu nasıl yapabilirm ?

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar bunu nasıl yapabilirm ?

Bu konudaki kullanıcılar: 1 misafir

6
Cevap 619
Tıklama 0
Öne Çıkarma

1. sayfa

bunu nasıl yapabilirm ?

Cevap Yaz

ehueehue1

15 yıl (134 mesaj)

Teğmen

Konu Sahibi

arkadaslar merhaba;
BU ADRESTE
"Care for a quick tour?"
yazısının altında cerceve içinde
1 den 5 e kadar sayılar var
5 in üzerine gelince sagda asagıdan bi panda çıkıyor.
bu olayı nasıl yapabilirim?
bir tutorial i veya bilen biri varsa çok memnun kalacağım..
şu anda çok lazım birşey, ilgilenirseniz teşekkür ederim

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

_uMaY_

15 yıl (6525 mesaj)

Yarbay

Bunu bende merak ediyorum...

Bu mesaja 1 cevap geldi.

Obscurty

15 yıl (356 mesaj)

Teğmen

yaprak şeklindeki reklamı bilenler vardır muhakkak onun mantığına yakın birşeyle yapılabilir kodlama bilen arkaraşlar editleyerek böyle bir çalışma yapabilirler belki

Bu mesaja 1 cevap geldi.

ehueehue1

15 yıl (134 mesaj)

Teğmen

Konu Sahibi

arkadaşlar bir yardım edebilecek yok mu acaba ?

Bu mesaja 1 cevap geldi.

ufukerdogmus

15 yıl (71 mesaj)

Çavuş

javascript ile yapılır bunlar. jQuery kütüphanesini de kullanabilirsin, daha kolaydır. (jQuery, javascript'i pratikleştiren bir kütüphane, ama yine javascripttir kendisi)

Öncelikle alttan çıkan panda resmini sayfaya html içine koyacaksın. CSS'ten bunu position: absolute, diyeceksin ve position olarak bottom:-200px, diyeceksin (resim boyu 200px ise tabi.) Böylece panda resmi absolute yani mutlak yer olarak ekranın dibinin 200 px aşağısına konacak. Yani yüklenecek ama görünmeyecek.

Sonra javascript ile üzerine gidilen düğmeye function ekleyeceksin. Mouse üzerine gidince de olur, tıklayınca da olur, tercih senin. Bu function panda resminin CSS bilgilerini değiştirecek. bottom:0 yapacak örneğin. Bu mantıkla oluyor kabaca. Ayrıntı istersen tekrar sorabilirsin, bu forumu takibe alıyorum. Ama yarın Türkiye'ye yola çıkacağım için bugün varım, yarın yokum ;)

Bu mesaja 1 cevap geldi.

ehueehue1

15 yıl (134 mesaj)

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: ufukerdogmus

javascript ile yapılır bunlar. jQuery kütüphanesini de kullanabilirsin, daha kolaydır. (jQuery, javascript'i pratikleştiren bir kütüphane, ama yine javascripttir kendisi)

Öncelikle alttan çıkan panda resmini sayfaya html içine koyacaksın. CSS'ten bunu position: absolute, diyeceksin ve position olarak bottom:-200px, diyeceksin (resim boyu 200px ise tabi.) Böylece panda resmi absolute yani mutlak yer olarak ekranın dibinin 200 px aşağısına konacak. Yani yüklenecek ama görünmeyecek.

Sonra javascript ile üzerine gidilen düğmeye function ekleyeceksin. Mouse üzerine gidince de olur, tıklayınca da olur, tercih senin. Bu function panda resminin CSS bilgilerini değiştirecek. bottom:0 yapacak örneğin. Bu mantıkla oluyor kabaca. Ayrıntı istersen tekrar sorabilirsin, bu forumu takibe alıyorum. Ama yarın Türkiye'ye yola çıkacağım için bugün varım, yarın yokum ;)

teşekkür ederim yardım için, ajax js olaylarıyla haşır neşirim, jquery ile de yapıldıgını biliyordum zaten ama uygulama olarak nasıl haledeceğimi bilmiyorum, var olan ajax uygulamlarını kullanabiliyorum rahatlıkla düzenleyebiliyorum ama, bunu başaramadım, ufak bi örnek yapabilirsen bunula ilgili minnettar kalırım kardeşim, hayırlı yolculuklar bu arada

Bu mesaja 1 cevap geldi.

ufukerdogmus

15 yıl (71 mesaj)

Çavuş

Yanlış olmasın, bu yapılan işlem AJAX değil. AJAX, javascript ile sunucuya bilgi gönderip sunucudan yeni bilgiler yüklersenki ismi. Bu örnekte panda resmi zaten baştan yükleniyor. O yüzden AJAX yok, sadece düz javascript var.

jquery kolay olduğu için jquery örneği vereyim:
sayfanın <head> kısmına jquery dosyasını yüklet.http://jquery.com/ dan jquery dosyasini indirip sunucuna da koyabilirsin, google hazır tutar jquery dosyasını, google'dan da yükletebilirsin: Bkz. google'dan yukletme soyle olur

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

sonra bunun altina da panda resminin css position değerini değiştirme hareketi şu şekilde:

<script> 
    $("#pandayıekranasokacakdugmeninIDsi").hover(function () { 
      $(this).css({'bottom' : '0px'}); 
    }, function () { 
      $(this).css({'bottom' : '-200px'}); 
    }); 
  </script>

Bu scriptte bottom 0px yapan hareket "hover" yani düğmenin üzerine mouse gelme eylemi. Sonra meouse çekilince de ikinci eylem yani bottom -200px olacak. Test etmedim kafadan yazdım, virgül, parantez falan hatası varsa kusura bakma biraz acelem var :)

Şuradan da bakabilirsin ingilizce ile aran iyiyse:
http://api.jquery.com/css/

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar bunu nasıl yapabilirm ?