Entradas
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.
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:
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?
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.
y como le pongo un enlace a la imagen???
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
Carol Para crear un link en la imagen lo puede hacer consultando la siguiente entrada, es muy facil!
Imagen link
De primera, de las opciones que vi, el mas simple.
SALUDOS
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.
Anonimo Dentro de las comillas deberás insertar la dirección de la imagen. Es decir las comillas se quedan ;) espero haberte ayudado.
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!
AYUDAAAAAAAAAAAA ! ! ! !
En Que seccion de WORDPRESS se pega este codigo ???
Como le hago, en donde lo pongo ???
HELP ! ! ! ! !
AYUUUUDDDAAAA ! ! !!
Alguien que sepa donde ponerlo en WORDPRES !!!
No se en donde se pega el codigo !!!!
Ayuda porfas !!!
buen aporte me ayudo mucho
esto es con Javascript? cierto
Publicar un comentario
Haga su comentario
Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.