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

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

5:38 Php Dersleri

Echo ve Print Komutlarının Kullanımı

Kategori: Php Dersleri | 01.02.2012
3:05 Php Dersleri
Seo(.htaccess)

Google Optimizasyonu - 2 | URL Yapısı

Kategori: Seo(.htaccess) | 12.08.2014
Genel Makaleler

Efor Patent Tescil İşlemleri

Kategori: Genel Makaleler | 14.07.2014
7:04 Php Dersleri

Php ile Kdv Dahil ve Kdv Hariç Hesaplaması Yapmak

Kategori: Php Dersleri | 04.05.2013

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.