¿Cómo deshacerse del borde alrededor de un elemento de imagen Se utiliza como un ancla

Cuando se utiliza una imagen como el ancla para un enlace en HTML, aparece un borde alrededor de la imagen. Si encuentras esta frontera antiestético, puede deshacerse de él o cambiarlo a algo más más atractivo tanto en formato HTML o CSS.

El uso de HTML

La etiqueta <img> HTML tiene un atributo opcional llamado "frontera". Puede utilizar este atributo para determinar si se visualiza ninguna frontera para cada imagen; si se establece el atributo de borde a un valor de "0", no se mostrará ninguna frontera, incluso si se apaga la imagen en un enlace. Por ejemplo:

<a href="&lt;img"> http://www.yourhost.com/yourpage.html">&lt;img alt = "Mi imagen" border = "0"> </a>

El atributo "frontera" para la etiqueta <img>, sin embargo, está en desuso; A pesar de que los navegadores siguen apoyando como del momento de la publicación, esto puede cambiar en el futuro.

El uso de CSS

CSS o Cascading Style Sheets, es una opción alternativa a quitar el borde de las imágenes. Agregue el código siguiente a la hoja de estilo de su página web para evitar las fronteras de los anuncios en alguna imagen que ha utilizado como un enlace:

un img {

border: none;

}

Si desea quitar el borde sólo de imágenes específicas, utilizar las clases de restringir qué imágenes deben verse afectadas. Al colocar el siguiente código en su sitio web de hoja de estilo evitará que las fronteras de mostrar solamente en las imágenes que ha utilizado como un enlace que pertenecen a la clase "noborder":

un img.noborder {

border: none;

}

Por ejemplo, la primera imagen en el siguiente código HTML no mostrar un borde, mientras que el segundo hará lo siguiente:

<a href="&lt;img"> http://www.yourhost.com/firstpage.html">&lt;img alt = "Primera imagen" class = "noborder"> </a> <a href = "& lt ; img "> http://www.yourhost.com/secondpage.html"> & lt; img alt = "Segundo imagen"> </a>

consideraciones

Quitar el borde de enlaces de imagen podría llevar a algunos usuarios novatos equipo para convertirse en frustrado con su sitio web. Si estás utilizando los enlaces de imagen como la navegación de su sitio web, considerar la inclusión de un suplente, la navegación de sólo texto o una frase corta que explica a los usuarios que deben hacer clic en las imágenes para navegar por su sitio web.

Solución de problemas de usabilidad

Para garantizar que sus lectores a entender que las imágenes son enlaces sin incluir ninguna de navegación o explicación adicional, considere el uso de CSS para cambiar el estilo de la frontera en lugar de eliminarla por completo. Como alternativa a la frontera sólida defecto, probar varios otros estilos, como el punteado, punteada, doble, inserción, comienzo, con surcos y camellones. También puede cambiar el grosor y color del borde. Experimenta con diferentes ajustes para encontrar una frontera que trabaja con el aspecto general de su sitio web, pero todavía claramente identifica a cada imagen como un enlace.