miércoles, 14 de mayo de 2008

Tutorial para cambiar de imagen con ratón

Esta entrada no tiene nada que ver con la fotografía, o bueno, algo sí, porque es un modo de mostrar para aprender... El caso es que como desde que introduje la modificación para ver la imagen sin procesamiento alguno al pasar el cursor del ratón por encima algunos de vosotros ha mostrado cierto interés en conocer cómo se hace pues he decidido hacer esta especie de tutorial para que quien lo desee sepa cómo hacerlo.

Antes de comenzar con el tutorial propiamente dicho, tengo que decir que no es un método automático, es decir, que no es un simple botoncito como el que se usa para meter imágenes cuando estamos creando nuestras entradas desde blogger, sino que requiere de cierta participación del 'redactor' aunque no es muy complicado...

En fin, lo primero que hay que hacer es subir las dos imágenes a blogger normalmente, es decir, como metemos normalmente nuestas imágenes, de este modo tendremos accesibles las rutas hacia las miniaturas de las mismas que es lo que necesitamos para hacer el cambio. Entonces, si tenemos activada la edición de la entrada en HTML tendremos algo parecido a lo que se ve en la siguiente imagen:


El texto que está 'enrojecido' son las rutas a las miniaturas. Ahora lo que tenemos que hacer es escribir las órdenes de control de eventos de ratón en una de esas dos entradas de imagen. Yo normalmente me quedo con la procesada, así, la visión por defecto de la miniatura es la de la imagen procesada. En la siguiente imagen se ve de nuevo enrojecido todo lo que he añadido en una de las dos entradas de imagen, básicamente son las órdenes OnMouseOver="this.src=''" y OnMouseOut="this.src=''" donde a cada una les añado la ruta a la miniatura correspondiente.


Pues bien, eso es todo, una vez incluida esas órdenes, la imagen cambiará cuando se pase el ratón por encima ;-) como se ve en esta que sigue....


Esta vez no iba a ser menos, y para ver la imagen más grande sólo tienes que hacer clic en la misma. Por cierto, el efecto animado de imagen a tamaño completo se hace con otro artilugio en javascript, si tenéis interés, puedo hacer un tutorial tan malo como este ;-).

12 comentarios:

cuentosbrujos dijo...

Ostras que vago me siento para estos menesteres, creo que me pasaré con mas detenimiento, jejej
es que es fin de semana y tengo por ahí algunos libros pendientes
saludos brujos¡¡¡

Luz-Molino42 dijo...

Qué interesante, Ramón, el efecto es muy chulo, y qué detalle pararte a explicarlo para todo aquél que quiera incluirlo en su blog. Buen tuto.
Un saludo.

Ricardo dijo...

Se agradece la exhaustiva explicación. Veo que aparte de dominar la fotografía, la programación no tiene secretos para ti.
Saludos

José-Angel dijo...

Bravo por este mini tutorial. A los bloggeros les has dado una buena herramienta. Ahora estaba pensando en Miguel Angel, le iría de coña para su sitio!

XuanRata dijo...

Muy generoso por tu parte, no solo por mostrar el proceso sino tambien por estar dispuesto a enseñar el antes y el después, como en los anuncios de crecepelos, pero sin engañar y sin cobrar nada (de momento).

Un saludo.

Anónimo dijo...

Esta bien esto del javascript. Te explicas como un libro cerrado.
Coje tus tres camaras, te las atas al cuello y te tiras por el primer barranco que pilles, en Despeñaperros¡ Matao, que eres un Matao! y ademas tonto

cuentosbrujos dijo...

enga macho, haz un poder y ponte una "fotico"
que si no ¿de ande aprendo???

jeje saludos Ramon
como ves me paso de vez en vez para ver si hay nuevo
saludos brujos

charmante dijo...

Jo qué guay, cuando tenga tiempo lo intentaré, a ver si soy capaz!!!
Gracias mil

ripley dijo...

pues muy util y muy clarito, al menos la teoria ya veremos que pasa cuando ponga manos a la obra. Gracias por la generosidad

DDanny dijo...

Hola, no conocía tu blog, pero buscando información en google he encontrado tu blog, preguntaba si podrías explicarme lo del efecto animado a tamaño completo, muchas gracias déjame un mensaje en mi blog, o un correo si puedes.
Mi dirección es elbuenkarma@gmail.com
Si tardo en contestar es porque voy a pasar dos días en madrid y no se si tendré internet. U saludo, gracias de antemano y enhorabuena por el blog.

NEL dijo...

aki hos dejo el html mas simple:



http://www.mediafire.com/?sul0myy4ipc

NEL dijo...

GRACIAS POR COMPARTIR Y AYUDAR.
SI NO ES MUXO PEDIR PODRIAS HACER EL TUTORIAL PARA AMPLIAR LA IMAGEN.
UN SALUDO AMIGO Y GRACIAS.