Grey Rollover Effect

This script will make the image look grey until you move your mouse over it. It looks cool. Hover your mouse above the image below to see it in action.



To have this effect add the code below to the image tag itsellf.
style="filter:progid:DXImageTransform.Microsoft. BasicImage(grayscale=1)" onmouseover="this.style. filter='progid:DXImageTransform.Microsoft. BasicImage(grayscale=0)'" onmouseout="this.style. filter='progid:DXImageTransform.Microsoft. BasicImage(grayscale=1)'"


For Example
<img src="http://bouncy-bubbles.net/tuts/greyrollover.gif" style="filter:progid:DXImageTransform.Microsoft. BasicImage(grayscale=1)" onmouseover="this.style. filter='progid:DXImageTransform.Microsoft. BasicImage(grayscale=0)'" onmouseout="this. style.filter='progid:DXImageTransform.Microsoft. BasicImage(grayscale=1)'">


Note: Any questions regarding this tutorial should be asked here.


« Back