En la imagen de la izquierda podéis ver lo que ocurriría con una imagen con enlace si estos los tenemos definidos con un fondo rojo. Ese cerquillo alrededor de la foto es lo que NO queremos que se vea.
Esto ocurriría con un código como este:
a {background: red;}
<a href="URL_IMAGEN"><img src="URL_IMAGEN"/></a>
El mismo problema tendríamos por ejemplo con un borde añadido a modo de subrayado u otros elementos. La excepción sería con los subrayados hechos con text-decoration y otras propiedas similares que sólo afectarán a los enlaces de texto.
Y la solución sería filtrar los enlaces con un selector de atributos para buscar los enlaces que apuntan a imágenes. Estos los distinguiremos fácilmente por su extensíón, así que sólo debemos crear una regla como esta y poner dentro propiedades que anulen las que hayamos definido para el resto de enlaces:
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
background-color: none;
border: 0;
}
background-color: none;
border: 0;
}
De esta manera, todos los enlaces que terminen en jpg, jpeg, jpe, png y gif adoptarán un nuevo estilo, en el ejemplo, sin color de fondo y sin borde. Para ver con más detalle cómo formular este tipo de selectores podéis ver esta entrada que publicamos hace tiempo.
Ejemplo de imagen con enlaces definidos con borde inferior:
La misma imagen con enlace tras aplicar el filtro para eliminar el borde:
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Mike Oldfield, que buen gusto!
ResponderEliminarMe acuerdo de que de pequeña me ponían sus canciones y flipaba...
¡Buen tuto! gracias :)
Pues recuerda esos años mozos echando un vistazo a Musicae ;)
EliminarHola, Oloman, si he entendido bien en esta entrada explicas cómo quitar el enlace de una imagen para que no aparezca por decir así "en original".
ResponderEliminarJusto hoy se me ha planteado este problema: al publicar una entrada en Blogger Store V2, al darle a la imágen se me abre en tamaño grande y es algo que no me interesa.
Lo que tu has explicado aquí, ¿me sirve para quitarle el enlace a la imagen? Y si la imagen tiene un enlace que conduce a verla en grande, ¿se le puede poner un enlace para que conduzca a la entrada?
Gracias
Pues no. Esto no es para quitar el enlace a la imágenes. Eso se hace quitando la etiqueta A que "rodea" la imagen (IMG). Y lo que tú dices que te pasa es que se activa el Lightbox de Blogger, un sistema llamado "Ventana modal" capaz de mostrar cierto contenido de manera destacada, normalmente, imágenes.
EliminarSi lo quieres desactivar simplemente vas al Escritorio y allí hay una casilla de verificación para ponerlo o quitarlo.
Hola!:
ResponderEliminarMe ha parecido un blog muy interesante.
Recurro a ti, por éste medio, ya que tengo un problema grave, en mi blog, ya que no está actualizando las entradas en los blogs que me tienen enlazada, por lo que pareciera que no he publicado en una semana y mis visitas se redujeron a cero... Estoy sumamente preocupada, ya que no se como solucionar éste problema. Podrías orientarme, por favor!!!!!!!. Te lo agradezco de ante mano, ya que mi blog y el contacto con mis seguidoras, es muy importante para mi.
MUCHAS GRACIAS DE ANTE MANO!
Me quedo a la espera de tu respuesta!
Sobre ese tipo de cosas no tengo casi idea, aunque sé que funcionan con el feed. Tendrías que repasar las opciones que tengas marcadas sobre eso en tu Escritorio, pero con paciencia al probar, pues los cambios no tienen efecto inmediato.
EliminarOye Oloman, muy buen blog, soy algo novato en cuanto a diseño y esas cosas; mi pregunta es:
ResponderEliminar¿Como puedo hacer para eliminar el menu contextual (boton derecho) de un video que he insertado en mi web? lo he visto en otras paginas y me gustaria hacerlo con los videos que inserto. esperarare tu respuesta y de antemano Gracias!!!!
Aquí tienes una manera, pero no olvides leer el resto del post.
EliminarHola Oloman:
ResponderEliminarQuería consultarte si tienes idea de como aplicar enlaces mediante código HTML que vayan seguidos, es decir, uno al lado del otro.
Normalmente cuando se aplica esto: Texto del enlace Texto del enlace Texto del enlace
Aparece así:
Texto del enlace
Texto del enlace
Texto del enlace
Y querría consultarte si sabes cómo hacer para que aparezca así
Texto del enlace Texto del enlace Texto del enlace
Un saludo!
Los enlaces salen seguidos por lo general y la prueba está en esos que pusiste en tu comentario. Tiene que ser una casuística concreta a la que te refieres ¿quizás son enlaces en una lista?
Eliminar¿como evitar imagenes de comentarios en bloguer al colocar link en facebook?
ResponderEliminarhola, lo que pasa que tengo un bloguer..
y algunas personas comentan, lo cual es bueno.
pero, cuando el link del bloguer lo pego en un facebook para compartirlo, sale mi bloguer, si, pero, sale la foto de la persona que al dejado su comentario en mi bloguer.
como hago para evitar su foto, sin borrar su comentario.
Lo mejor es usar el marcado de datos de Facebook (Open Graph Protocol), pero yo no he publicado nada al respecto por lo que tendrás que buscar en otros sitios cómo se hace.
EliminarNo logro quitarle ese estilo que sale debajo de la imagen cuando pongo el cursor encima... quizá es que no lo aplico donde debe ser. apliqué el códico encima de ]]> pero no hace nada.
ResponderEliminarLo tienes que poner en cualquier parte entre las etiquetas SKIN, pero lo mejor es que sea lo más cercano posible a la de cierre.
EliminarEn tu caso, prueba a poner esto otro:
separator {
font-size: 0;
}
No te entendí nada. Dónde están en la plantilla las etiquetas skin?
EliminarPerdona por el comen 7.2 pero legaba de currar y alucinaba jajaja. Luego ví que en realidad te refieres al cierre de ]]>
EliminarAhi lo puse y no hace nada.
Salu2
Lo he comprobado y sí funciona Gude. Inténtalo con !important:
Eliminar.separator {
font-size: 0 !important;
}
Cierto Olomanm funcionó así.
EliminarMuchas gracias.
Félix, si el enlace lo metes desde la entrada, sólo lo podrás quitar de esta mediante JavaScript.
ResponderEliminarLa solución más fácil que veo es que montes tus entradas sin enlace en las imágenes y luego para la página de entradas y de etiquetas (INDEX), que añadas la imagen y el enlace con este sistema.
Porque a es una etiqueta HTML y funciona directo. No es una clase (selector) CSS, que sí requieren el punto o una almohadilla #. Lo mismo pasa con IMG, BR, HR, TABLE, etc.
ResponderEliminarDe todas formas ya te di otra idea para quitar el enlace sin tener que ocultar la imagen que es lo que realmente haces con eso ;)
Hay otra forma de mostrar imágenes más grandes sin recurrir a JavaScript y lo de que Blogger te limite el número de entradas se soluciona añadiendo el corte < !--more--> a todas las entradas, pero si has encontrado otro sistema y además te gusta el resultado, pues ya está :)
ResponderEliminar