Foros del Web » Creando para Internet » CSS »

Enlace en imagen

Estas en el tema de Enlace en imagen en el foro de CSS en Foros del Web. Hola! Tengo una pregunta...¿cómo hago para que un enlace situado en una imagen, no muestre un cuadro morado alrededor? Muchas gracias....
  #1 (permalink)  
Antiguo 12/07/2010, 07:08
 
Fecha de Ingreso: julio-2008
Mensajes: 62
Antigüedad: 9 años, 4 meses
Puntos: 0
Enlace en imagen

Hola!

Tengo una pregunta...¿cómo hago para que un enlace situado en una imagen, no muestre un cuadro morado alrededor?

Muchas gracias.
  #2 (permalink)  
Antiguo 12/07/2010, 07:24
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.095
Antigüedad: 9 años, 4 meses
Puntos: 164
Respuesta: Enlace en imagen

Código HTML:
<img src="images/mi-imagen.jpg" border="0" />
<img src="images/mi-imagen.jpg" class="sin-borde" />
<div class="sin-borde-2">
<img src="images/mi-imagen.jpg" />
<img src="images/mi-imagen2.jpg" />
<img src="images/mi-imagen3.jpg" />

</div> 
Código:
css:

.sin-borde{
 border: 0;
}

.sin-borde-2 img{
 border:0;
}
Un saludo!
  #3 (permalink)  
Antiguo 12/07/2010, 11:16
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Enlace en imagen

Más fácil:

Código CSS:
Ver original
  1. a img{
  2. border: none;
  3. }

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 13/07/2010, 02:41
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.095
Antigüedad: 9 años, 4 meses
Puntos: 164
Respuesta: Enlace en imagen

Pero en ese caso se aplicará a todas las imágenes que tengan link :S

Un saludo!
  #5 (permalink)  
Antiguo 13/07/2010, 15:48
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Enlace en imagen

mas facil aun:

Código HTML:
Ver original
  1. <a href="la url aqui"><img src="la url de la imagen" alt="opcional" width="opcional" height="opcional" BORDER="0"></a>

explicacion breve:
a href= pon la url destino al dar clic en la imagen
img src= la url de la imagen a mostrar
alt= texto opcional que aparece si por problemas la imagen no logra cargarse
width=ancho de la imagen, este sirve para mientras transcurre el tiempo al cargarse la imagen, aparece una siluta con el ancho y el alto de l imagen.
heith= igual que width, solo que aqui mostraras lo alto y no el ancho.
border= aqui ponemos 0 y con eso eliminamos el borde y no aparecera =D

saludos!!

TD: es solo HTML no lleva CSS =D


_______________________________________

sobre lo de Carlangueitor
puedes usar un id o class en el link y en vez de poner "a img"
pones el id o el class y asi obtienes border: 0; o border: none; en CSS =D

y asi solamente se vera afectada la img con dicha id o class

Última edición por XxflezhaxX; 13/07/2010 a las 15:55
  #6 (permalink)  
Antiguo 13/07/2010, 15:52
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Enlace en imagen

XxflezhaxX, te lo vuelvo a decir, ese tipo de etiquetas son obsoletas y ya no se usan en XHTML, además de que estamos en el foro de CSS, hay que seguir lo más posible los estándares.

Saludos
__________________
Grupo Telegram Docker en Español
  #7 (permalink)  
Antiguo 13/07/2010, 15:53
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Enlace en imagen

Border=0 ya dejó de ser válido... Además, concuerdo con Carlangueitor, si se quiere borrar todos los bordes de las imágenes enlace, lo mejor es un a img{border:none}

Edito: Choque con Carlangueitor
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 13/07/2010, 15:58
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Enlace en imagen

Ups!! estoy un poco desactualizado
ojala me explicaran eso de ya no existe.

quiere decir que para el borde hay que usar CSS.
o el valor "none" funciona en HTML reemplazando el 0??????

No puedo creer que el profe nos enseñe cosas obsoletas de 1880 xD
tendre que hecharselo en cara al ixhe profesor ¬¬

por cierto disculpas =D ya van dos el dia de hoy :(
  #9 (permalink)  
Antiguo 13/07/2010, 16:07
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Enlace en imagen

Es que lo que tu pusiste son atributos HTML, y la especificación de XHTML dice que los estilos deben ser con CSS, ya sea en una hoja externa (lo más recomendable, en muchos aspectos), en la cabecera del mismo documento o inline si así se requiere, en este caso si quiere sque solo aplique a esa imagen hay dos opciones, poner una class o id y hacer lo antes mencionado o hacerlo inline:

Código HTML:
Ver original
  1. <a href="#"><img src="imagen.jpg" alt="Texto alternativo" style="border: 0;" /></a>

border: 0 y border: none, tiene la misma función, aunque prefiero la segunda

Y te falta una diagonal para cerrar la etiqueta img. Tampoco el ALT es opcional si quieres validar, además que es una buena practica para la usabilidad.

Saludos
__________________
Grupo Telegram Docker en Español
  #10 (permalink)  
Antiguo 13/07/2010, 17:51
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Enlace en imagen

Cita:
Iniciado por Carlangueitor Ver Mensaje
Es que lo que tu pusiste son atributos HTML, y la especificación de XHTML dice que los estilos deben ser con CSS, ya sea en una hoja externa (lo más recomendable, en muchos aspectos), en la cabecera del mismo documento o inline si así se requiere, en este caso si quiere sque solo aplique a esa imagen hay dos opciones, poner una class o id y hacer lo antes mencionado o hacerlo inline:

Código HTML:
Ver original
  1. <a href="#"><img src="imagen.jpg" alt="Texto alternativo" style="border: 0;" /></a>

border: 0 y border: none, tiene la misma función, aunque prefiero la segunda

Y te falta una diagonal para cerrar la etiqueta img. Tampoco el ALT es opcional si quieres validar, además que es una buena practica para la usabilidad.

Saludos
o sea que segun XHTML
todos los valores (en este caso le llamaremos diseño) que vendria siendo la apariencia, el posicionamiento, etc etc... se deben de hacer en CSS

bueno si estoy bien o mal diganme.. que quiero comprender esto.
Gracias carlangueitor.

y por cierto he usado CSS externamente y en la cabezera pero que es inline ??
Gracias de nuevo desde ya =D
  #11 (permalink)  
Antiguo 13/07/2010, 18:42
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Enlace en imagen

Cita:
Iniciado por XxflezhaxX Ver Mensaje
No puedo creer que el profe nos enseñe cosas obsoletas de 1880 xD
De hecho es de 1994 ... De igual forma, he visto casos peores de profesores, hace poco me tocó el caso de un chico al que le enseñaban a maquetar con la etiqueta font

Personalmente prefiero border:0, pero no quería decir algo distinto a carlangueitor, por temor a confundir a la gente XD...

Casi todo lo que es diseño, debe ir directo a CSS, solo algunas propiedades de width y height aun son permitidas para imágenes y objetos, entre otros detalles... Lo mejor es que uses el validator para que veas que está bien y que no en tu código

También, es mejor poner la mayor parte del código en una hoja CSS externa, ya que carga más veloz si se ha visitado una página antes, pues ya estará cargado en la máquina los estilos, y por lo mismo, hace menos peticiones al servidor con lo que se consume menos ancho de banda.

Aunque si es algo que se usa solo una vez, es posible que sea mejor ponerlo directo sobre la etiqueta "en línea" mediante el atributo style, justo como en el ejemplo mostrado antes:

Código HTML:
<a href="#"><img src="imagen.jpg" alt="Texto alternativo" style="border: 0;" /></a> 
Espero esta pequeña guía te sirva de mejor referencia
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #12 (permalink)  
Antiguo 13/07/2010, 18:59
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Enlace en imagen

ooo claro ya entiendo.
pone style="border:0;"

pone el estilo en linea, eso es inline.
me recomiendas que CSS sea externo
y ya he usado en la cabezera.

Gracias amigo, no abia notado el ejemplo anterior, pero tienes razon, ya comprendi esto.
Gracias =D
  #13 (permalink)  
Antiguo 13/07/2010, 20:09
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Enlace en imagen

Así hacen en las escuelas, a mí también supuesta mente me ensañan HTML y es lo mismo, y lo peor es que el maestro me jode cuando le entrego las cosas bien.

Saludos
__________________
Grupo Telegram Docker en Español
  #14 (permalink)  
Antiguo 14/07/2010, 03:56
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.095
Antigüedad: 9 años, 4 meses
Puntos: 164
Respuesta: Enlace en imagen

Hola buenas de nuevo,

En mi primer ejemplo coloco las posibilidades que comentáis,

pd: aquí dejo el validador de w3 para que veáis que border="0" esta validado, aunque yo tampoco lo uso ya que los estilos css van mejor aparte.

http://validator.w3.org/check

UN saludo!
  #15 (permalink)  
Antiguo 14/07/2010, 11:53
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Enlace en imagen

Puede ser válido dependiendo del doctype que uses, creo que el HTML 4 (todas las versiones) y el XHTML 1.0 Transitional son los que aceptan eso.

Saludos
__________________
Grupo Telegram Docker en Español
  #16 (permalink)  
Antiguo 14/07/2010, 12:49
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Enlace en imagen

Cierto, es el Strict el que muestra en verdad cuales son las mejores prácticas. Es por eso que yo uso este como guía
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #17 (permalink)  
Antiguo 16/07/2010, 13:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Enlace en imagen

Hola:

XxflezhaxX, para que lo comprendas mejor échale un vistazo a los libros de XHTML y CSS que aparecen en www.librosweb.es, están muy claritos y de lectura rápida, además tienen algún que otro ejercicio que conviene hacer.

Saludos.



P.D.: Aunque en el caso del profesor ten cuidado no te vaya a pasar lo que le pasa a Carlangueitor

Etiquetas: enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:56.