[Tips] RollOver Sencillo con JQuery.
Hola que tal, hace unos días buscando buscando por la red, encontré un código y tras unas modificaciones me sirvió bastante para hacer imágenes de Sustitución, (Sorry por la palabra en ingles, a algunos les molesta).
La idea es tener una función que haga la precarga de las imágenes y que cuando se pase el mouse por encima de ella, se reemplace, esto es lo lógico, pero veamos la forma de hacerlo de manera más eficiente (por lo menos eso creo yo)
Código:
<script src="jquery-1.3.2.js" type="text/javascript"></script> <script language="jscript" type="text/jscript">
$(document).ready(function() {
$(".roll").each(function() {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig, "_over.jpg");
$("<img>").attr("src", rollON);
});
$(".roll").mouseover(function() {
imgsrc = $(this).attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig, "_over.jpg");
$(this).attr("src", imgsrcON);
}
});
$(".roll").mouseout(function() {
$(this).attr("src", imgsrc); });
});
</script>
Lo primero que hacemos es realizar la precarga de las imágenes que están marcadas con el atributo Class=”roll” estoy es muy importante para el ejemplo , debido a que, al hacer mouseover sobre la imagen marcada con nav y contenga un link(a) lo que vamos a hacer es reemplazarla por una imagen que tenga el el mismo nombre, pero termine en _over.jpg
Aunque no se note mucho la imagen de la derecha es más clara, (para el efecto rollover), recuerda el tag de la imagen (class):
<a href="SituacionesApendizaje.aspx"><img class="roll" src="images/menu4_docente.jpg"
Ahora puedes tener seteado en tu carpeta imágenes las img normales y las over, y setear tu class =roll y automágicamente vas a tener tu Rollover sin mucho esfuerzo. :)
Espero que te sea de ayuda, ahhh y otra cosa, te pido un favor grande, en varios post vas a ver este logo:
Me puedes ayudar en este concurso?, mil gracias!