Índice

Insertar un enlace sobre una imagen

Los enlaces desde una imagen se realizan simplemente insertándola entre las etiquetas de enlace <a> ... </a>.

Algunos navegadores continúan dibujando un borde alrededor de la imagen (poco estético) para señalar el enlace. Internet Explorer 8 y 9, así como Firefox 3.6, siguen presentando este comportamiento. Los demás navegadores de nuestro estudio (Internet Explorer 10+, Firefox 4+, Opera 10+, Safari 5+ y Chrome 7+) no agregan este borde.

images/07RI02.png

Para quitar este borde, en HTML5 es preciso utilizar una declaración de estilo. Antes de realizar un estudio detallado de las hojas de estilo, basta con agregar a la etiqueta <img> la declaración style="border: none;".

El código completo es:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<p><a href=globo.htm> 
<img src="globo.jpg" width="120" height="120" alt="Globo 
terrestre" style="border: none;"> 
</a><\p> 
</body> 
</html>
images/07RI03.png