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 <img> tagına
style="filter:gray();" kısmını ekleyin.
Mouse üzerine gelince renklenmesi için yine <img> 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 <img> 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.
