Üzerine Gelince Renklenen Resim

Web sitelerimizde normalde s/b gözüken bir resmin üzerine gelince renklenmesini, tek resim kullanarak nasıl yaparız?

Web sitelerimizde özellikle menü yaparken normalde siyah beyaz gözüken bir resmin üzerine gelince renklenmesini isteriz.

Bunu bir siyah beyaz resim, bir de renkli resim olmak üzere iki resim kullanarak kolaylıkla yapabiliriz. Dreamweaver ın Rollover Image aracını kullanarak bunu yapmak çok kolay.

Ancak biz bu örneğimizde bunu tek bir resim kullanarak yapacağız. Kullanacağımız resim renkli olacak ve griye çevirme işlemini filtre kullanarak yapacağız...

Öncelikle bu efekti uygulamak istediğiniz resmi belirleyin ve sayfanıza ekleyin.

Daha sonra normalde siyah beyaz olarak açılması için resminizin tagına style="filter:gray();" kısmını ekleyin.

Mouse üzerine gelince renklenmesi için yine tagına onmouseover="this.style.filter='none'" kodunu ekleyin.

Mouse üzerinden çıkınca tekrar siyah beyaza dönmesi için de onmouseout="this.style.filter='gray()'" kodunu ekleyin.

Sonuçta tagı aşağıdaki gibi olmalı...


<img style="filter:gray();" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='gray()'" src="deneme.jpg" />



İşte hepsi bu... Tek bir resim kullanarak bu etkiyi kolayca elde edebiliyoruz.
  • Etiketler;
Hakan Çamoğlu
1983 İstanbul doğumludur. 1999 yılından bu yana web tasarımı/programlama üzerine çalışan Hakan Çamoğlu, halen 2004 yılında kurduğu ajansında işlerini sürdürmektedir. Aynı zamanda özel eğitim merkezlerinde web tasarımı konusunda eğitmenlik ve danışmanlık yapmaktadır. Vidobu.com kurucu ve ortağıdır. Flash, Dreamweaver ve Captivate konularında Adobe Certified Expert sertifikasına sahiptir. Vazgeçemediği hobileri ise fotoğraf çekmek ve gitar çalmaktır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

peki resmin yanına kenarlık nasıl çizeriz onuda bi anlatırmısınız ben frameborderi denedim fakat olmadı
renkliye geçerken animasyon kullana bilirmiyiz.?
saol dost
Bu küçük ve işe yarar ders için teşekkürler. Ancak firefox'ta çalışmıyor sanırım. Denedim ama olmadı. Explorerda sorun yok ama firefoxa uygun hale nasıl getirebiliriz?
Bunu sayfadaki bütün resimleri içine alacak şekilde nasıl ele alabiliriz Teşekürler şimdiden
bu kucuk hacimli ama guzel manali ders icin cok tesekkur ederim.ben azerbaycanliyim.site yaratmak istiyorum.profesyonel ve ya guzel bir site yarata bilenler lutfen mail atsin.bir ikili calisma gibi yapmak istiyorum.:gul::gul::D:D
tamda aradığım şeydi, fakat bunu CSS ile bi menü tarzında yapamazmıyız? Mesela bi class oluşturup o classa bu özellikleri verelim.sonra class hangi resme eklenirse o resim böyle olsun?
Arkadaşlar merhaba çok eski bir konuyu hortlatıyorum ama ben kod yazmayı hiç bilmiyorum sadece bi internet sitesi (blog) açmak istedim ve açtım yukarıda da yazdığı gibi hep gri olsun ama üstüne gelince kendi rengine dönsün istiyorum fakat nasıl yapacağımızı bir türlü anlamadım yardımcı olacak var mı acaba?

Yukarı Git