jueves, 2 de abril de 2009

CAMBIAR IMAGEN AL PASAR EL CURSOR

Lograremos con esto mostrar dos imágenes en el espacio de una, consiste en mostrar una imagen por defecto y cuando el cursor se encuentra encima de la imagen cambiar la imagen, de esta forma podremos crear transiciones que le den un toque especial a nuestro blog. La forma de aplicar este recurso es muy simple y es como se indica a continuación.

Primer paso:(Previos)

Si queremos aplicar este recurso tendremos que tener claro cuales son las dos imágenes que queremos mostrar, deberemos por tanto modificar su tamaño en el caso de que ambas imágenes no sean iguales, llegado a este punto tendremos que alojarlas en un servidor de imágenes yo por ejemplo utilizo este copiamos la dirección que se genera y pasamos al siguiente paso.

Segundo paso:(Como insertarlo)

Tendremos que copiar en el lugar de la entrada que deseemos el siguiente código en la parte de Edición de HTML.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL PRIMERA IMAGEN"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="URL PRIMERA IMAGEN" onmouseover="this.src='URL SEGUNDA IMAGEN'" onmouseout="this.src='URL PRIMERA IMAGEN'" alt="" border="0" /></a>

Sustituiremos donde poner URL PRIMERA IMAGEN por la dirección de la imagen que se mostrará por defecto y URL SEGUNDA IMAGEN por la imagen que se mostrará al tener el cursor encima de la imagen.Obtendremos resultados como el siguiente.

Ejemplo:(Situar cursor encima de la imagen)

13 Comentarios:

Carabela OLANO dijo...

muy bueno pero tengo una duda... logre que mi magen cambiara pero no lo hace instantaneamente sino que el cursor debe estar sobre la imagen uno o dos segundos para que esta cambie... ¿que puedo hacer?

caxitos dijo...

Carabela OLANO Puede ser que tarde un poquito en cargar la imagen dependiendo de las dimensiones y resolución de la misma, te aconsejo que para este tipo de efectos utilices imagenes en formato .jpg ya que son las que menos ocupan y acelerarán el proceso de carga.

Anónimo dijo...

Muy bueno, he puesto en miblog y va de maravilla, pero tengo una pregunta : como redirecciono la imagen, o sea que al hacer clck vaya por ejemplo a contacto del mismo blog.
Gracias por la información.
Un saludo . carol

caxitos dijo...

Carol Para crear un link en la imagen lo puede hacer consultando la siguiente entrada, es muy facil!

Imagen link

Anónimo dijo...

Me puedes ayudar porfavor... Como le hago para hacer esto en my blog en WORDPRESS ???

Otra pregunta:

Se reemplaza todo lo que esta DENTRO de las comillas? o todo junto con las comillas ??

Gracias x su tiempo y comprension.

Ivan dijo...

Anonimo Dentro de las comillas deberás insertar la dirección de la imagen. Es decir las comillas se quedan ;) espero haberte ayudado.

Inda Chelepska dijo...

Em alguien sabe cómo eliminar el hipervínculo automático al hacer click sobre la imagen?

No tengo ningún interés en que se abra otra ventanita con la imagen en exactamente el mismo tamaña con fondo blanco :/

Como que arruina el "ambiente" :P

Gracias :D

PD: Muy bueno el blog!

www.cesarchavezphotography.com dijo...

AYUDAAAAAAAAAAAA ! ! ! !

En Que seccion de WORDPRESS se pega este codigo ???

Como le hago, en donde lo pongo ???

HELP ! ! ! ! !

www.cesarchavezphotography.com dijo...

AYUUUUDDDAAAA ! ! !!

Alguien que sepa donde ponerlo en WORDPRES !!!

No se en donde se pega el codigo !!!!

Ayuda porfas !!!

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.