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 (117)
DEMOYU GÖRÜNTÜLE (298)
- 25.06.2013 / 01:11:56 1

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

8:24 jQuery Dersleri
7:43 Php Dersleri

Değişkenlerde Array Yapısı

Kategori: Php Dersleri | 02.05.2013
24:26 jQuery Dersleri

jQuery ile Basit Slider Yapımı

Kategori: jQuery Dersleri | 03.05.2013
Genel Makaleler

SQL Injection Açıklarından Kurtulma Yolları

Kategori: Genel Makaleler | 25.07.2014
3:26 Php Dersleri

PDO ile MySQL Veri Silme İşlemi | Delete

Kategori: Php Dersleri | 07.06.2014

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.