mehmetduran.com - Paylaşmak Güzeldir...
Javascript ile Manşet Yapımı
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){ // parametreler
    document.getElementById("manset").src = image; //id`si manset olan resme yeni resmi yüklüyoruz
    document.getElementById(kontrol).style.color = text; // üzerine geldiğimiz kutunun font rengini değişitriyoruz
    document.getElementById(kontrol).style.backgroundColor = back; // üzerine geldiğimiz kutunun arka plan rengini değiştiriyoruz}
function out(kontrol,renk,text){ // parametreler
    document.getElementById(kontrol).style.backgroundColor = renk; // üzerinden çıktığımız kutunun font rengini değiştiriyoruz
    document.getElementById(kontrol).style.color = text; // üzerinden çıktığımız kutunun arka plan rengi}

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

div id="1" style="background-color:#dcdcdc; height:23px; margin-bottom:1px; padding-left:10px;" onmouseover="getir(`1`,`img/1.jpg`,`green`,`white`)" onmouseout="out(`1`,`#dcdcdc`,`black`)" Alan1 /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.

Örnek projeyi buradan indirebilirsiniz.
İyi Çalışmalar!

Mehmet Duran 11 Temmuz Cuma 2008 37 30599 4,0
Javascript Web Tasarım Tasarım-Görsellik Resim Fotoğraf
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar jQuery ile Dinamik Alanlar Oluşturma (Scroll Olmadan ve Yatay) Vesikalık Fotoğraflarınızı Eskiye Benzetin Ascii Generator dotNET Jquery İnner Fade Uygulaması Jquery ile LightBox Slayt Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Murat 04 Kasım Salı 2008 04:16 #1
İşime gerçekten çok yaradı emeğine sağlık teşekkürler.Peki bunu photoshopta tasarlayıp flash'ta hareket verebilirmiyiz mesela manşet belirli bir süre sonra diğer habere geçmesini istersek bu mümkün mü kod yazmadan yapabilirmiyiz?
Mehmet Duran 04 Kasım Salı 2008 13:22 #2
Hareket olayını jquery, javascript ile yapabilirsin. Flash ve photoshop olayını ben pek bilmiyorum.
serkan KILIÇ 02 Şubat Pazartesi 2009 14:53 #3
Merhmet arkadaşım örneğin süper olmuş ... ama şöyle bir soru daha sorsam .. sen resimleri img klasöründen çekmişsin peki ben admin panelinden eklediğim haberleri gridlist ile göstertsem anasayfada haber Başlığını .mdb`deki başlık dan alsa resmide açmış olduğum resim tablosundan çektirebilirmiyiz o tarz bir uygulama olabilirmi ben yeni başladımda aspx`e yapma imkanın warsa o tarz bir uyulama örneği yapailirmisin arkadaşım ...
Mehmet Duran 02 Şubat Pazartesi 2009 14:56 #4
Merhaba. Bu uygulamayı veritabanı ile yapmak için sadece sayfamızda bir adet data kontrolü (repeater) koyup, verileri yüklemeliyiz. Ardında da repeater`ın itemtamplate bölümünü manşet alanı gibi html kod ile oluşturmak işini görür. Örnek yapmak isterdim ancak örnek yapacak zamanım yok.
serkan KILIÇ 02 Şubat Pazartesi 2009 15:15 #5
Peki arkadaşım biraz uğraşayım hep hazır hazır nereye kadar bu siteyi bugün gördüm ve mükemmel dökümanlar war eline sağlık yapamazsam yanındayım Mehmet USTA :D
Serkan KILIÇ 03 Şubat Salı 2009 09:28 #6
Mehmet Kuzen yapamadım ben ya hepsi bir birine girdi db`ye haber kayıt yaparken resmi kaydedemedim gridlist ile verileri çekiyom ama manşet sistemi yapamıyorum resimleri db`ye kayıt yapamadığım için resimleri çekemiyorum :( nasıl yapacağız kuzen gridlist ile manşet sistemini yapabilirmiyiz ?
Mehmet Duran 03 Şubat Salı 2009 10:40 #7
Hemen bir örnek yapamam ama boş bir zamanımda yapmaya çalışırım.
serkan kılıç 03 Şubat Salı 2009 14:54 #8
elimde birtane manşet örneği war başlığın üzerine gelince haber resmini falan gösteriyor amaa ben db`deki haber başlığını göstertip ve o başlığa ait resmide göstermek istiyorum yanında db ile yapmam lasım :(
Erdinç Çelik 06 Şubat Cuma 2009 16:44 #9
Eline sağlık fakat resmin altında yazınında değişmesini istiyorsak nasıl yaparız ?
Mehmet Duran 06 Şubat Cuma 2009 19:14 #10
Resimde olduğu gibi bir adet span veya başka tag altında bir bölüm oluşturacaksın ve her değişimde resim yanında o alanın text`ini de değiştireceksin. Resim değiştirme ile aynı mantık.
Erdinç Çelik 06 Şubat Cuma 2009 19:42 #11
Ben çok denedim ama beceremedim ya anlamadım
Mehmet Duran 06 Şubat Cuma 2009 22:05 #12
Dediğim gibi mantık resim ile aynı. Resim değiştiği anda belirlediğin alanın text`ini de değiştireceksin. Resim ile tek farkı resmin adresi değişirken, yazı yazacağın alanın text`ini değiştireceksin.
Erdinç Çelik 06 Şubat Cuma 2009 23:23 #13
yapıyorum olmuyor .src var textte .text mi yazzqacaz anlamadım valla o kadar deniyorum olmuyor
Mehmet Duran 06 Şubat Cuma 2009 23:27 #14
Anladım text yazdırmayı diyorsunuz. Eğer span tagı kullanıyorsanız veya başka taglarda olabilir. Bunun için şöyle bir kodlama yapmalısın : document.getElementById("span_id").innerHTML = "atanacak değer"; Böyle bir kodlama ile javscript ile istediğin elementin text`ini değiştirebilirsin.
Erdinç Çelik 06 Şubat Cuma 2009 23:34 #15
alan1 alan2 alan 3 alan4 hepsine gelince aynı atadıgım değer çıkıyo hepsine farklı nasıl yaparım acaba
Mehmet Duran 06 Şubat Cuma 2009 23:37 #16
Şimdi resim olayında resmin adresini nasıl alıyorsan, text olayında da yazdıracağın metni resim adresi gibi fonksiyon parametresinden alacaksın. Eğer yaptığın örneği bir yerde gösterme imkanın varsa daha iyi olur. Buradan şöyle olur böyle olur demek pek iyi değil.
Erdinç Çelik 06 Şubat Cuma 2009 23:40 #17
document.getElementById("span_id").innerHTML = "atanacak değer"; atanacak değere metin yazdim sonra; yaptığımda alan2 nin üzerine gelince oldu teşekkür ederm yardımların için..Pekiyi veritabanından almak zormudur resimleri haberleri falan ??
Mehmet Duran 06 Şubat Cuma 2009 23:47 #18
Veritabanı ile yapmak için bu yapının aynısını kullanman yeterli. Bunun içinde Repeater data kontrolünü öneririm. Yapman gereken repeater`ın içini manşet şedlinde tasarlaman. Javascript fonksiyonundaki parametreleri de veritabanından gelen değerler ile eşleştireceksin.
Erdinç Çelik 06 Şubat Cuma 2009 23:50 #19
Yardımların için teşekkür ederim.Senin dediğin data kontrolü araştırıyım..
Serkan KILIÇ 10 Şubat Salı 2009 10:16 #20
Yapıyor Yapıyorum istediğim gibi db`den manşet resmini çekemiyorum + istediğim gibi olmuyor yazının üstüne geliyom 2 saniye sonra resim de değişiyor ... birtane örnek yapsanız aslında süper olurdu Mehmet DURAN ...
Mert Perçinkaya 07 Mart Cumartesi 2009 22:24 #21
Elinize sağlık. Bir sorum olacak rollover olduğunda zemine bir renk değil de bir bg resim koymak için nasıl bir tanımlama yapmak doğru olur?
Mehmet Duran 07 Mart Cumartesi 2009 23:22 #22
Arka plan rengi değil de arka plan resmi / fotoğrafı için backgroundImage özelliğini kullanmalı ve bu özelliğe değer vermelisin.
Mert Perçinkaya 07 Mart Cumartesi 2009 23:36 #23
document.getElementById(kontrol).style.backgroundColor = renk; satırında backgroundColor yerine backgroundImage mi kullanılacak? resim yolu nereye gelecek?
Mehmet Duran 07 Mart Cumartesi 2009 23:38 #24
Evet aynen dediğin gibi olacak ama bu özelliğe renk değeri değil resim yolunu ve adını vereceksin. (...backgroundImage=klasor_adi/resim_adi gibi.)
Mert Perçinkaya 08 Mart Pazar 2009 00:06 #25
Buna göre, aşağıdakinin çalışması gerekiyor doğru mu? function getir(kontrol,image,text) { document.getElementById("manset").src = image; document.getElementById(kontrol).style.color = text; document.getElementById(kontrol).style.backgroundImage = "resim.gif"; }
Mehmet Duran 08 Mart Pazar 2009 00:13 #26
Yazmış olduğunuz kodda problem yok ve çalışması gerekir. Yolunu belirttiğin resim hakkında bir problem yoksa çalışması gerekiyor.
Mert Perçinkaya 08 Mart Pazar 2009 00:21 #27
Yardım için teşekkürler ancak resim yolun farklı şekillerde denememe rağmen hatta http://... şeklinde bile yazmama rağmen olmadı.. denemelerim sürüyor çözebilirsem bilgi veririm yeniden..
Mert Perçinkaya 08 Mart Pazar 2009 01:03 #28
document.getElementById(kontrol).style.background="background-image: url(`res.gif`) no-repeat"; Bu şekilde yapınca oluyor, umarım bir katkı olmuştur..
dunkof 15 Temmuz Çarşamba 2009 20:13 #29
mehmet duran için kücük insanlık için büyük adım :p
salim serdar 20 Temmuz Pazartesi 2009 13:58 #30
burda alan1 alan2.... link verdiğimzde alttan çizgi çekiyor alt çizgiyi nasıl kaldırırız???
Mehmet Duran 21 Temmuz Salı 2009 00:40 #31
Bu alt çizgi a tagının alt çizgisi ve bunu a tagı için tanımlayacağın css class veya özellikle kaldırabilirsin. (<a style="text-decoration:none;"></a> gibi.)
hakan 06 Eylül Pazartesi 2010 11:41 #32
Hocam gerçekten kusura bakmayın ben iki saattir gözümün önündeki href yazısını görememişim :( Biraz önceki mesajıma cevap yazmanıza gerek kalmadı . İyi çalışmalar.
Mehmet Duran 06 Eylül Pazartesi 2010 13:15 #33
Arada oluyor böyle şeyler. :D Kolay gelsin.
Ahmet 06 Eylül Pazartesi 2010 14:45 #34
Peki butonlardaki sayıların yerine ilgili haber başlığını getirmek istersek, ne yapmamız gerekir yardım edebilir misiniz?
Mehmet Duran 06 Eylül Pazartesi 2010 17:26 #35
@Ahmet, buradaki örnekte zaten resmin yanında alan bir metin alanı ve bu değere istediğin değeri atayabilirsin.
kamil 07 Eylül Salı 2010 14:43 #36
Hocam size sormak istediğim örnekten biraz farklı bir durum ama bu haber sistemleriyle alakalı ;). "Bu seçilen haberin id sini detay sayfasına nasıl aktarabiliriz, bir bilgi veya giriş seviyesindeki birisine uygun bir link verebilir misinz ?
Mehmet Duran 08 Eylül Çarşamba 2010 08:54 #37
Bunun için döngü veya kontrol içinde a tagları oluşturmalısın. Bu tagın href değerini verirken veritabanından aldığın primary, unique bir sütun değerini kullanabilirsin. Örnek olarak buradaki yazımda paylaştığım örneği inceleyebilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Ne edersen kendine, edersin kendi kendine.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009