jueves, 13 de marzo de 2008

Script para cambiar de imagen cuando el cursor pase sobre ella

En realidad es bien simple y puede ser aplicable a cualquier blog. En este caso lo vamos a usar para un blog de Blogger. Ubicamos primero este pequeño script antes de la etiqueta </head> de nuestra plantilla. Para eso ya saben van a Diseño - Edición de HTML y marquen la casilla Expandir plantillas de artilugios.

<script>
graphic1= new Image();
graphic1.src = "dirección URL de la imágen cuando el cursor este sobre ella";
graphic1on = new Image();
graphic1on.src = "dirección URL de la imágen normal";

function imageChange(imageID,imageName)
{document.images[imageID].src = eval(imageName + ".src");}
</script>

Luego vamos a aplicarla en algún lado. Digamos que queremos cambiar el mensaje Suscribirse a: Enviar comentarios (Atom) por una imagen. Tenemos entonces que conseguirnos primero 2 imágenes, una para mostrarla normalmente y la otra que se mostrará cuando el cursor se ubique sobre ella. Estos eventos se denominan onmouseover (con el cursor sobre) y onmouseout (con el cursor fuera).

Ahora pulsamos Ctrl-F y en la casilla de búsqueda del browser (hablo del IE que es el que uso, no sé cómo será en otros browsers) ponemos feed-links y deberá de mostrarnos 2 coincidencias. La primera es casi al inicio de la plantilla, es el estilo CSS del link. Ese no es el que buscamos. El siguiente debe ser algo así como esto:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

Entonces lo vamos a modificar lo que esta en rojo de esta manera:

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' onMouseOut='imageChange("uno","graphic1")' onMouseOver='imageChange("uno","graphic1on")' target='_blank'>

<img expr:alt='data:feedLinksMsg + data:f.name + "  (" + data:f.feedType + ")"' name='uno' src='dirección URL de la imágen normal'/>

</a>

Ahora bien veamos algunos puntos.

  1. Dense cuenta de que la dirección URL de la imagen normal es la misma que hemos incluido inicialmente en el script que ubicamos antes de la etiqueta </head>.
  2. Al link normal le hemos agregado los eventos onmouseover y onmouseout.
  3. El tag de imagen (img) debe mostrar por default la imagen normal y se ha agregado el tag alt que es el texto que mostrará cuando el cursor este sobre la imagen y no es nada más que el código original que muestra el texto
  4. Suscribirse a: Enviar comentarios (Atom)

Espero que les sea de utilidad y si tienen alguna consulta no duden en publicarla que la atenderé lo más pronto posible.

2 comentarios:

  1. Hola, La Verdada Interesante Lo Que Escribiste, pero en verdad no me quedo muy claro, jaja, me interesa mucho eso del onmouseover y out, pero no se mucho de lenguaje HTML, pero de a poco que ido enchulando mi blog, ahora bien lo que yo quiero hacer y no se si se podra es poner una imagen que se cambie PERO! como un elemento de pagina (DISEÑO/ELEMENTO DE PAGINA/HTML-Javascript) entiendes? ojala me puedas responder pronto,,

    saludos

    http://naruto-no-blog.blogspot.com

    ResponderEliminar
  2. Hola mi estimado. Me alegra sabe que en algo te ha servido mi pequeño artículo. Veamos, cuando tú me dices que quieres hacer eso pero con un elemento de página(DISEÑO/ELEMENTO DE PAGINA/HTML-Javascript)entiendo que quieres hacer un mouseover/out con algo que has publicado como un elemento que agregas a tu blog.

    Bueno eso va a depender de lo que quieras poner ahí, pues no es el mismo tratamiento. Verás, el script que puse es para imagenes, pero si quieres hacer algo más complejo primero lo primero y dime que tienes en mente (olvidate de los tecnicismos) sólo dime, por ejemplo "quiero que aparezca un efecto X y que al pasar el mouse encima cambie a un efecto Z" o algo asi, para poder ve si puedo ayudarte.

    Estamos en contacto y por cierto he agregado tu blog a mi lista de blogs & webs de amistades sin compromiso alguno de tu parte por cierto.

    Un saludo desde Lima, Perú

    ResponderEliminar

AVISO:
Muchas gracias por considerar dejar un comentario. Te pido por favor que tengas en cuenta las siguientes pautas:
1. Evita usar lenguaje prosaico u ofensivo, y mantener siempre el respeto por todos.
2. Respeta las opiniones de los demás y no cometas el error de atacarlos de manera insultante o prosaica.
3. Si no estas de acuerdo con el tema publicado, ambos sabemos que hay forma de realizar una crítica sin ofender ni agredir.
4. También queda prohibida los enlaces de promoción o publicidad descarada.
5. Finalmente te pido que no utilices abreviaturas en tus respuestas para poder mantener una armonía en la lectura de los mensajes y una mejor comprensión de la lectura.

Y como muestra de mi gratitud por tu visita y comentario, si tienes sitio web o blog y has ingresado ese dato u OpenID, agregaré tu web o blog en mi sección Blogs de amistades y/o que me gusta visitar seguido.

En caso contrario tu comentario podría ser eliminado. Aprecio mucho que consideres esta petición de mi parte. Muchas gracias por tu comprensión.

Nota: solo los miembros de este blog pueden publicar comentarios.

El pianista que tocó y alguien escuchó

Una marmota en el barrio de Lima

Historias de una cocina

El cine que compartí