Eliminar estilo de enlaces para imágenes | Oloblogger Últimamente estoy publicando pequeños truquillos con CSS que alguna vez me hicieron falta y que no quiero que se me olviden. Son esos que en...

26 de marzo de 2013

Eliminar estilo de enlaces para imágenes

Últimamente estoy publicando pequeños truquillos con CSS que alguna vez me hicieron falta y que no quiero que se me olviden. Son esos que en el argot algunos denominan con la palabra inglesa snippets (fragmentos) y que realmente son sólo pequeños trozos de código que por sí solos no sirven para nada pero que son útiles para resolver determinados problemas de diseño web.

Eliminar estilo en imagenes
El de hoy sirve para cuando aplicamos determinado estilo a los enlaces y ese mismo estilo nos aparece de manera no deseada en una imagen que a su vez tiene un enlace a otra a tamaño original. Esto es lo que suele pasar cuando subimos una imagen en Blogger o cuando usamos algún tipo de lightbox para poder ampliarlas a demanda.

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;
}

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:

Eliminar estilo en imagenes

La misma imagen con enlace tras aplicar el filtro para eliminar el borde:

Eliminar estilo en imagenes

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

24 comentarios :

  1. Mike Oldfield, que buen gusto!
    Me acuerdo de que de pequeña me ponían sus canciones y flipaba...
    ¡Buen tuto! gracias :)

    ResponderEliminar
    Respuestas
    1. Pues recuerda esos años mozos echando un vistazo a Musicae ;)

      Eliminar
  2. Hola, 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".

    Justo 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

    ResponderEliminar
    Respuestas
    1. 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.

      Si lo quieres desactivar simplemente vas al Escritorio y allí hay una casilla de verificación para ponerlo o quitarlo.

      Eliminar
  3. Hola!:
    Me 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!

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  4. Oye Oloman, muy buen blog, soy algo novato en cuanto a diseño y esas cosas; mi pregunta es:

    ¿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!!!!

    ResponderEliminar
  5. Hola Oloman:

    Querí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!

    ResponderEliminar
    Respuestas
    1. 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
  6. ¿como evitar imagenes de comentarios en bloguer al colocar link en facebook?
    hola, 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.

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  7. No 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.

    ResponderEliminar
    Respuestas
    1. Lo 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.
      En tu caso, prueba a poner esto otro:
      separator {
      font-size: 0;
      }

      Eliminar
    2. No te entendí nada. Dónde están en la plantilla las etiquetas skin?

      Eliminar
    3. Perdona por el comen 7.2 pero legaba de currar y alucinaba jajaja. Luego ví que en realidad te refieres al cierre de ]]>

      Ahi lo puse y no hace nada.

      Salu2

      Eliminar
    4. Lo he comprobado y sí funciona Gude. Inténtalo con !important:
      .separator {
      font-size: 0 !important;
      }

      Eliminar
    5. Cierto Olomanm funcionó así.

      Muchas gracias.

      Eliminar
  8. Hola Oloman. NO sabía donde dejarte esta duda.

    Resulta que estoy poniendo imágenes coon un VÍNCULO a las entradas, en la portada y etiquetas de mi blog. Este es el blog: http://goo.gl/ZZc74B

    Pero me gustaría que ese vínculo a las imágenes desapareciese cuando estás ya dentro de la propia entrada:

    He intentando varias cosas, pero no logro mi propósito:

    1) Intento. Apliqué un hidden a los vínculos del post-body (cuando se ven fuera de entradas), pero de esta forma también me "cargo" los enlaces que tenga de tipo texto cuando entras en la entrada. Malo.


    .post-body a {
    display: none;}


    2º. Intento: Trato de añadir "img" al enlace vínculo, para que sólo elimine las imágenes vinculadas, que es lo que quiero, pero no sucede nada.


    .post-body a img {
    display: none;}


    3º) Intento. Viendo tu post, pensaba que sería capaz de aplicar algo, para eliminar los vínculos de determinados tipos de imágenes. Pero una vez colocado esto en la plantilla no sucede ningún cambio.

    a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    display: none;}

    Así que nada, te pido una ayudita para lograr mi cometido, porque ya llevo 2 días leyendo aquí y allá, pero no consigo dar con la solución. Un cordial saludo

    ResponderEliminar
    Respuestas
    1. Félix, si el enlace lo metes desde la entrada, sólo lo podrás quitar de esta mediante JavaScript.

      La 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.

      Eliminar
  9. Ya di con la solución.... no hay nada mejor que escribir una duda (hacerla texto), que que que surja la solución.

    Resulta que en la plantilla estaba poniendo esto

    .a img {display:none;}

    Y no pasaba nada, por culpa del punto. Pero sin punto, si funciona

    a img {display:none;}

    Entonces, te pregunto por curiosidad, ¿por qué con el punto no funcionaba mientras que muchas cosas del skin se ponen con punto? je je. Saludos

    ResponderEliminar
    Respuestas
    1. 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.
      De 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 ;)

      Eliminar
    2. Gracias por responder Oloman. Pero te cuento que he decidido renunciar a los sumarios resumidos porque la imagen que sale resumida necesito que sea más grande.

      Y ahora me dirás que también hay un truco para agrander imágen. Sí, pero pasa una cosa.

      Cuando introduzco el scritp de agrandar imágenes para el truco de sumarios resumidos, Blogger me muestra los post que le da la gana en portada y etiquetas (en ocasiones solo 6, 8 10...) pero nunca los 50 post que consigo con el método que voy a implementar ahora de ocular la imagen enlazada.

      Mira cómo va quedando lo que te digo.. je je (a mi me gusta, otra cosa es que a Google no le gusten los "diplay:none"... porque quién oculta... algo esconde.. je je) http://goo.gl/ZZc74B

      Gracias por contestar.

      Eliminar
    3. 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á :)

      Eliminar