data:newerPageTitle data:olderPageTitle data:homeMsg

jueves, 13 de marzo de 2008
8:20:00

Muchas gracias. Este post tiene 2 comentarios

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:

サスケ dijo...

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

Rómulo dijo...

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ú

Haznos saber tu opinión

Todo comentario es bien recibido. Pero debes de tener en consideración los siguientes puntos:
1. No se permitirán insultos.
2. No se permitirá comentarios únicamente con publicidad. En todo caso te sugiero enviar un mensaje privado para ver el tema.
3. No se permitirá ningún tipo de ataque, agresión ni apologías de ningún tipo que inciten a la violencia o reacciones violentas. Se puede criticar y entablar debate sin necesidad de agredir a nadie.
4. No se permitirá ningún tipo de discriminación, segregación ni racismo.

Todos los comentarios serán sujetos a moderación, así que por favor les pido un poco de paciencia. Muchas gracias por comentar en este blog.



Coméntalo en Facebook

data:newerPageTitle data:olderPageTitle data:homeMsg

Publicados en esta categoría...

Suscribete a De Copy and Paste