Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.
La solución es simple y consiste en disponer la etiqueta <img> encerrada entre la marca de comienzo y fin del enlace(<a>)
Confeccionemos una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página.
Las imágenes se encuentran en la carpeta del directorio padre donde se encuentra nuestra página HTML:
<!DOCTYPE html> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href="pagina2.html"><img src="../foto1.jpg" alt="Pintura Geométrica"> </a> <br> <a href="pagina3.html"><img src="../foto2.jpg" alt="Pintura Geométrica"> </a> </body> </html>
El resultado en el navegador es:
Como podemos observar insertamos el elemento HTML img en el lugar donde disponíamos el texto del hipervínculo. Eso es todo.
Lo que debe quedar bien en claro es que las imágenes se encuentran en el directorio padre de donde se encuentra nuestra página (luego para indicar la referencia al archivo lo hacemos antecediendo dos puntos seguidos y la barra invertida ../ con lo que hacemos referencia al directorio padre (tengamos en cuenta que si las imágenes se encuentran en el mismo directorio luego solo indicamos el nombre del archivo: <img src="foto2.jpg" alt="Pintura Geométrica"> )
Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos archivos en distintas carpetas.