Imágenes y enlaces

En el apartdo de enlaces se puedes ver que estos se escriben mediante la etiqueta <A></A> la cual rodea al elemento que señala donde pulsar con el ratón para ir al sitio que se indica en href. Esta parte puede ser un texto, como pulse aquí, o una imagen. A diferencia de la versión anterior de HTML, las imágnes que son a su vez enlaces no se destacan con un borde azul. Esta imagen se crea de forma normal no necesita nada en especial: o sea, etiqueta img con los atributos necesarios, como mínimo el src. Incluso pueden usarse texto e imagen como cuerpo del enlace. Si se desea se le puede dar foramto con estilos CSS
<a href="genero-terror.htm">
<img src="/imgs/im_crear/indice2.png" alt="Género Terror" width="45" height="30" style="textalign:center">
</a>

Se ve así:

Tema 1

Mapas de enlaces de cliente

Los enlaces en las páginas web pueden estar construidos en base a un texto o a una imagen, como habrás visto en el apartdo de enlaces. En el caso de usar imágenes HTML nos ofrece una interesante posibiidad: hacer que cada parte de la imagen contenga una URL diferente, es decir, apunte a un lugar diferente. Así se crea un mapa de enlaces. Un ejemplo puede ser esta imagen con tres enlaces, depende en que parte pinches con el ratón:

Este sería el códigfo del ejemplo :

<img src="imgs/delreves.jpg" alt="" width="362" height="310" usemap="#personajes"/>
<map name="personajes">
<area shape="circle" coords="169,63,54" href="mapa/alegria.htm">
<area shape="rect" coords="190,156,293,278" href="mapa/tristeza.htm">
<area shape="circle" coords="271,95,57" href="mapa/asco.htm">
<area shape="rect" coords="107,135,187,269" href="mapa/furia.htm">
<area shape="poly"
coords="32,49,27,117,57,202,85,226,109,114,73,51" href="mapa/miedo.htm">
</map>

Como ves se trata de una imagen normal, pero lleva un atributo usemap cuyo valor es el nombre de un mapa definido con el elmento map. En este elemento se describen tras tipos de figuras geométricas definidas con el atributo shape, circle para círculo, rectangle apra rectángulo y poly pra una figura irregular.

Cada figura se define por un sistema de coordenadas cuyo origen está en la esquina superior izquierda de la imagen. Para definir cada figura se usa:

rectángulo: coordenadas de su esquina superior derecha, tamaño de la base y altura

circulo : coordenadas del centro y el radio

polígono: coordenadas de cada punto.

Finalmente cada forma lleva un atributo para el enlace al que debe ir cuando se pulsa dentro de ella.

Mapa de enlaces de servidor

Este tipo de mapas usa un programa alojado en el servidor para procesar la pulsación sobre la imagen. Al pulsar se llama al programa que recibe las coordenadas del punto donde se ha pulsado, dependiendo de las coordenadas hará una cosa u otra. Es necesario crear ese programa, lo que se puede hacer en perl, php, o cualquier otro lenguaje del servidor. Por ejemplo

El código para este enlace es

<a href="destino.php"><img src="imgs/delreves.jpg" width="215" height="184" ismap alt=""/></a>

Como ves es un enlace basado en una imagen y apunta a una página php que recibe como argumentos el lugar donde se pulsa. En este ejemplo el programa tan solo nos dice donde se ha pulsado. El programa en php sería

# Extraer argumentos
list($x, $y) = preg_split("/,/", $_SERVER['QUERY_STRING']);
print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Se ha pulsado en el punto".$_SERVER['QUERY_STRING'].": X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

En otros lenguajes tendría otro aspecto pero lo principal es leer los arugmentos (coordenadas donde se pulsó al llamarlo) que van en la url en este caso si se pulsó en el punto 140,150 el enlace tendrá la forma destino.php?140,150 y el programa debe extraer esos valores.