Crear un div y aplicarle a éste una clase que sea la que contenga la imagen y hacer un cambio de clase cuando el scroll está en una posición determinada. La intención es hacer un menú que cambie de imagen cuando el scroll llegue a esta posición y vuelva a cambiar cuando continúe hacia abajo.
CSS
Código:
JAVASCRIPTdiv.ricki { content:url(images/menu_08.gif); } div.ricki { content:url(images/menui_08.gif); }
Código:
HTMLonScrollHandler = function() { var rickowens = images/menu_08.gif.src; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > 100) { newImageUrl = "images/menui_08.gif" } if (scrollTop > 200) { newImageUrl = "img2.jpg" } if (scrollTop > 300) { newImageUrl = "img3.jpg" } yourImageElement.src = newImageUrl; }; object.addEventListener ("scroll", onScrollHandler);
Código:
<td> <a href="#2"><img id="rickowens" src="images/menu_08.gif"></a> </td>