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.
Esta Muy bueno el ejemplo, Gracias Potro.
ResponderSuprimirHola Pepe,
ResponderSuprimirIgual 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.
ResponderSuprimirHola Ascesino96,
ResponderSuprimirEn 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?
ResponderSuprimirUmmmm, 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.
ResponderSuprimirSaludos.
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??
ResponderSuprimirTe puse el enlace entre el texto del comentario anterior, quizá no se ve por el color, te lo paso de nuevo:
ResponderSuprimirhttp://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:
ResponderSuprimirhttp://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html
¡Hola, Potro! Espero que te la estés pasando súper, amigo.
ResponderSuprimirFí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!!!
ResponderSuprimirCon el código que apliqué también tengo control sobre las dimensiones de la imagen.
ResponderSuprimirHola Eduardo,
ResponderSuprimirDe 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
ResponderSuprimirBusca dentro del código las dos veces que aparece esto:
ResponderSuprimiropacity: 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.
ResponderSuprimirNecesitaría ver cómo estás poniendo el código y así detectar dónde está el problema.
ResponderSuprimirSaludos.
Umm, el problema es que no se puede, solo dices que en una entrada o en un elemento html, no habia visto :S
ResponderSuprimirCuando se aplica directo en la plantilla a veces no funciona, pero no siempre es el caso.
ResponderSuprimir¿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.
ResponderSuprimirAgradezco tu respuesta Potro, muchas gracias.
Con este truco no, pero puedes hacerlo con este otro.
ResponderSuprimirSaludos.
GRACIAS
ResponderSuprimirhey amigo gracias por el truco, peo me gustaría hacerte una pregunta, como modificas el % de opacidad de la imagen? es que he modificado los valores y no sucede nada...
ResponderSuprimirte lo agradeceria
Se cambia donde dice opacity: 0.2; filter:alpha(opacity=20) y this.style.opacity=0.2;this.filters.alpha.opacity='20';
ResponderSuprimirSi lo quieres menos opaco entonces cambia esos valores por otros más altos, por ejemplo, si lo quieres a la mitad de opacidad entonces cambia 0.2 por 0.5 y cambia el 20 por 50
Potro, me encanta tu blog. Está genial!
ResponderSuprimirTe quería preguntar si se puede lograr este efecto al mismo tiempo en TODAS las entradas. Gracias por los trucos y la buena onda! :D
Se le puede poner la opacidad a todas las imágenes de manera automática pero no tendrían el efecto al pasar el cursor, así que es necesario hacerlo en todas las entradas donde se desee mostrar.
ResponderSuprimir¡Saludos y gracias por tu comentario!
dioooooooooooooos no me anda ayudame por diooos!
ResponderSuprimirCon gusto Berenice, pero necesito saber más detalles para poder hacerlo, como en qué blog lo has puesto, y si te aparece algún error, o sólo más detalles.
ResponderSuprimircomo siempre, tu blog me salva!!
ResponderSuprimirHola Potro esta muy bien, este truquillo pero quisiera ponerlo en general para todas la imagenes de mi blog, quisiera saber si esto se puede hacer..!!GRACIAS..
ResponderSuprimirHola Mauricio,
SuprimirEste no porque usa Javascript directo en la imagen, pero al inicio de la entrada hay un enlace a un método con CSS, ese sí puedes aplicarlo a todas las imágenes de tu blog, sólo cambia a.opacidad img por img
Y a.opacidad:hover por img:hover
Este comentario ha sido eliminado por el autor.
ResponderSuprimirComo cambio la "URL de la imagen"
ResponderSuprimirMira esta entrada para que veas cómo obtener la URL de una imagen:
Suprimirhttp://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
como hago para que la imagen con el efecto de opacidad tenga también un link que redirija a otra pagina?
ResponderSuprimirEncierra el código de la imagen entre <a href="URL del enlace"> y </a>
Suprimir:D genial gracias! una cosita mas (si es que se puede..) como puedo configurar la opacidad? :B
SuprimirMira el comentario #24 ;)
Suprimirah :) muchas gracias! a la próxima leo mejor :p
Suprimir