5.2.Las imágenes y los enlaces

Es perfectamente posible utilizar una imagen como "punto caliente" en un enlace, de igual manera que anteriormente vimos cómo usar texto realzado para destacar el punto de enlace. Basta para ello incluir esa imagen entre las etiquetas de apertura y cierre del enlace, <A> y </A>.

Veámoslo con un ejemplo:

    <!-- Ejemplo 8: las imágenes y los enlaces -->
    <HTML>
    <HEAD>
    <TITLE> Ejemplo 8: introducción a los enlaces mediante imágenes </TITLE>
    </HEAD>
    <BODY>
    <H1><CENTER><FONT COLOR="red">
    Estos son ejemplos de enlaces locales entre documentos que usan imágenes como "puntos calientes"
    </FONT></CENTER></H1>
    <HR>
    <P> Pulsar aquí para ir al Ejemplo 1 <A HREF="ejem01.htm"><IMG SRC="catalan.gif"></A>
    para verlo en catalán (¡si estuviera traducido!)
    <P> Pulsar aquí para ir al Ejemplo 2 <A HREF="ejem02.htm"><IMG SRC="castella.gif"></A>
    para verlo en castellano
    <P> Pulsar aquí para ir al Ejemplo 3 <A HREF="ejem03.htm"><IMG SRC="ingles.gif"></A>
    para verlo en inglés (¡si estuviera traducido!)
    <P><A HREF="ejem04.htm">Pulsar aquí para ir al Ejemplo 4</A>
    <P><A HREF="ejem05.htm">Pulsar aquí para ir al Ejemplo 5</A>
    <HR>
    </BODY>
    </HTML>

Las tres imágenes necesarias para realizar el ejercicio son (catalán), (castellano), (inglés) , que pueden capturarse fácilmente marcándolas con el botón derecho y aceptando la opción de guardarlas que ofrece el navegador.

Debe escribirse en un procesador de texto cualquiera (puede copiarse directamente desde aquí), grabarlo con el nombre que se quiera, sin formato (texto puro), con la extensión HTM, y leerlo luego con un navegador. Se observará claramente la diferencia que hay entre el código fuente y lo que luego aparece realmente en la pantalla, y se probarán todos los enlaces definidos, observando cómo trabajan las imágenes incorporadas. Si se desea comprobar el resultado, puede hacerse aquí. Como siempre, se ha de tener en cuenta que al salir de los ejemplos se retrocederá a la página desde donde se llamaban, por lo que será mejor utilizar los botones de retroceso suministrados por el propio navegador.