Ya vimos cómo tener este efecto de opacidad en las imágenes al pasar el cursor sobre ella; en esa ocasión lo hicimos usando un poco de CSS en la plantilla y asignando una clase en la imagen.
Esta vez haremos lo mismo pero sin editar la plantilla, además con dos variantes, una es que una imagen con opacidad tome su color normal al pasar el cursor sobre ella, y otra que una imagen con color normal se muestre opaca al pasar el mouse.
Imagen con opacidad y color normal al pasar el mouse
<img style="opacity: 0.2; filter:alpha(opacity=20);" src="URL de la imagen" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>
Imagen normal y efecto de opacidad al pasar el mouse.
<img src="URL de la imagen" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>
Sólo pega el código dentro de una entrada o un elemento HTML/Javascript y cambia lo que está en rojo por la URL de la imagen.
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Unirse en Facebook
Enviar un correo
Iconos RSS.PNG)
Música JPZ
21 comentarios:
Esta Muy bueno el ejemplo, Gracias Potro.
Hola Pepe,
Igual a mí me gustaron esas imágenes =)
Saludos!
y tengo una pregunta, me puedes dar el código o decirme alguna entrada que diga como hacer para poner las estadisticas del blog, como en el gadget tuyo que dice 'LA CIUDAD TIENE' y despues dice los dias, las entradas y los comentarios.
Hola Ascesino96,
En esta entrada está el gadget:
http://ciudadblogger.com/2009/09/gadget-de-estadisticas-del-blog.html
Saludos.
hola muchas gracias por el truco, y ya que estoy comentando, te pregunto como hacen esos blogs para ñadir íconos delante de los titulos de la sidebar, pero yo no quiero una icono solo, quiero una para cada entrada en especifico, por ejemplo, a la de últimos comentarios, añadirle un msn, y todo así, como puedo hacerlo?
Ummmm, no sé si te he entendido bien, hay una forma de poner un icono en los títulos de la sidebar, sino es eso dime un blog de ejemplo para verlo.
Saludos.
pa, me mataste, lo he visto pero no me encuentro donde, sino ya me hubiera fijado para orientarme un poco, pero mira, te explico, yo eh visto en algunos blogs que ponen por ejemplo, en el gadget de últimos comentarios ponen al lado del titulo un pequeño icono de un globo de dialogo, al lado de otro gadget, un icono que lo represente. Cómo se hace eso, porque yo se la manera de poner en sidebar h3 { background-image: url ('IMAGEN') } pero ese icono se pone en todos los gadgets, me entiendes??
Te puse el enlace entre el texto del comentario anterior, quizá no se ve por el color, te lo paso de nuevo:
http://ciudadblogger.com/2009/06/poner-iconos-en-etiquetas-y-otros.html
En esa entrada explico cómo poner un ícono distinto para cada gadget.
Saludos.
Perdón, el enlace anterior es para poner un ícono a los elementos del gadget, en este es para poner un ícono o una imagen de fondo en el título del gadget:
http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html
¡Hola, Potro! Espero que te la estés pasando súper, amigo.
Fíjate que acabo de ver esta herramienta que acabas de poner y me gustó mucho. ¡Está excelente! Entonces pensaba preguntarte: "¿se puede hacer lo mismo para usar una imagen como enlace para otro sitio (Mi Perfil, por ejemplo) y si se puede hacer que se abra en una ventana nueva?". Entonces me dije a mí mismo: "¿y por qué no intentas hacerlo tú solo?". ¿Y qué crees? ¡Lo logré! Lo único que tuve que hacer fue manipular el código HTML y listo. ¿No te parece emocionante? Bueno, estoy seguro que muchos aquí pueden hacer eso y mucho más, pero para mí significa "dar un paso muy importante a un mundo mayor" como dice Obi-Wan Kenobi.
Ya puse esta herramienta en mi Blog y se ve excelente, pues con el fondo azul se ve como un fantasma, y aparece en "alta definición" al pasar el puntero del mouse.
No lo hubiera logrado sin tu ayuda, amigo. Sé feliz. Un abrazo de hermanos. ¡Saludos a todos! Chao.
bueno, lo provare y gracias por tomarte tu tiempo en estas pabadas, en serio!!!
Con el código que apliqué también tengo control sobre las dimensiones de la imagen.
Hola Eduardo,
De verdad me da mucho gusto saber que vas avanzando en esto de los códigos. Ya irás descubriendo que puedes hacer infinidad de cosas moviendo o agregando sólo unos caracteres.
Ya vi tu perfil en tu blog y me encantó cómo se ve la opacidad de esa imagen con el fondo azul de tu blog.
Felicidades!
ola hay forma de que no quede tan opaca la imagen? como se manipula
Busca dentro del código las dos veces que aparece esto:
opacity: 0.2
Cambialo por 0.5 u otro número mayor para tener menos opacidad.
Hola Potro, yo ya lo active, al final de cada post puse 2 imagenes para suscripciones, pero no se aplica ese efecto de opacidad. Sabes cual sea el problema? Saludos.
Necesitaría ver cómo estás poniendo el código y así detectar dónde está el problema.
Saludos.
Umm, el problema es que no se puede, solo dices que en una entrada o en un elemento html, no habia visto :S
Cuando se aplica directo en la plantilla a veces no funciona, pero no siempre es el caso.
¿Puede suceder esto en una entrada escrita?. Quiero decir que cuando se pase el mouse, la enrtada publicada se ponga más opaca que las demás, como para poder visualizar que es "ESA LA ENTRADA QUE SE LEE" sin entrar en ella.
Agradezco tu respuesta Potro, muchas gracias.
Con este truco no, pero puedes hacerlo con este otro.
Saludos.
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.