Javascript İle Haberler Manşet Sistemi Yapmak!

Javascript ile manşet alanı birçok sitede kullanılan bir yöntem. Özellikle haber sitelerinde kullanılıyor. Bende bunun yapılışını basit bir şekilde anlatacağım. Öncelikle yapacağımız uygulamanın görüntüsü şöyle olacak.Şimdi de yazacağımız javascript kodlarına bakalım.

function getir(kontrol,image,back,text){
document.getElementById("manset").src = image;
document.getElementById(kontrol).style.color = text;
document.getElementById(kontrol).style.backgroundColor = back;
}
function out(kontrol,renk,text){
document.getElementById(kontrol).style.backgroundColor = renk;
document.getElementById(kontrol).style.color = text;
}

Şimdi ise html tarafında bu fonksiyonları nasıl çağıracağımıza bakalım.

<div id="1" class="asd" onmouseover="getir('1','img/1.jpg','blue','white')" onmouseout="out('1','#dcdcdc','black')">Başlık1</div>

Javascript ile yazdığımız getir fonksiyonunda kontrol parametresi ile hangi kutunun üzerine geldiğimizi elde ediyoruz. İmage parametresi ile kutunun üzerine geldiğimizde hangi resmin yükleneceğini belirliyoruz. back ve text ile de üzerine geldiğimiz kutunun arka plan rengini ve text rengini belirliyoruz.

Sonuçta yukarıda elde ettiğimiz gibi alanımızı bitirmiş oluyoruz. Tasarım kısmı size kalmış. İstediğiniz gibi tasarlayabilirsiniz.
EK DOSYALARI İNDİR (111)
DEMOYU GÖRÜNTÜLE (280)
- 25.06.2013 / 01:11:56 1

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

Genel Makaleler
3:01 Php Dersleri

While Döngüsünün Kullanımı

Kategori: Php Dersleri | 02.05.2013
Php Dersleri
4:10 Php Dersleri
8:06 Php Dersleri

Yorum Listesi (3) # YorumYap

  • murat kara (26.06.2013 - 11:56:40)
    işime yaradı
  • Atakan (01.08.2013 - 12:47:08)
    Valla çok işime yaradı
  • suna (06.04.2014 - 19:05:28)
    Merhaba.
    http://demo.cmssolutionsexpert.com/cmsse-sliders-demo/cmsse-featured-contents-slider/

    buradaki wordpress eklentisinde sizin yaptığınız gibi maouse üzerine geldiğinde seçim başlığının değişmesini asıl sağlarım. Şuanki örnekte tıklama ile değişiyor. Yardımcı olursanız sevinirim.

    Teşekkürler. İyi çalışmalar..

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.