OnMouseWheel Fade Imagen

Hay eventos para casi todo, algunos relativamente nuevos, poco utilizados en JavaScript. Ahora, tienes la oportunidad de darle una utilidad más a la rueda del mouse: ¡hacer un efecto fade sobre una imagen!. Con un sencillo Script es posible. Veamos:

<script type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
opac = 100;

function fader(delta){
if (document.all){document.all(“fadimg”).filters.alpha.Opacity = opac}
if (document.getElementById && !document.all){document.getElementById(“fadimg”).style.opacity = (opac/100)-0.01}
if (document.getElementById && !document.all){document.getElementById(“fadimg”).style.MozOpacity = (opac/100)-0.01}
if (document.getElementById && !document.all){document.getElementById(“fadimg”).style.KHTMLOpacity = (opac/100)-0.01}
if (delta < 0 && opac >= 000) opac–;
else
if (delta > 0 && opac <= 100) opac++;
}

function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta){delta = event.wheelDelta/120;
if (window.opera) delta = -delta}
else
if (event.detail){delta = -event.detail/3}
if (delta) {fader(delta)}
}

if (window.addEventListener)
window.addEventListener(‘DOMMouseScroll’, wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
//–>
</script>

<img src=”logo.png” width=”99%” height=”49%” id=”fadimg” style=”filter:alpha(Opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1″>

Como véis, no precisamos sofisticados métodos, ni grandes archivos, para conseguir un efecto DHTML; con un o dos Kb. basta.

Un Saludo.

OnMouseWheel Fade Imagen

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s