Enlace en imagen

[marvellous]

Hola!

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

Muchas gracias.

[miktrv]

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!

[Carlangueitor]

Más fácil:

Código CSS:

a img{
border: none;
}
 

Saludos

[miktrv]

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

Un saludo!

[XxflezhaxX]

mas facil aun:

Código HTML:

<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

[Carlangueitor]

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

[daPhyre]

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

[XxflezhaxX]

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 :(

[Carlangueitor]

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:

<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

[XxflezhaxX]

Iniciado por Carlangueitor

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:

<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

[daPhyre]

Iniciado por XxflezhaxX

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

[XxflezhaxX]

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

[Carlangueitor]

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

[miktrv]

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!

[Carlangueitor]

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

[daPhyre]

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

[jomaruro]

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