Apunts Pràctics HTML 4.0 - 12 Mapes d'imatges

APUNTS PRÀCTICS HTML 4.0

12 - Mapes d'imatges

En aquest capítol es tracten els següents elements:

Contingut del capítol:

Links en mapes - imatges sensibles (imatges GIF's)

Els links en imatges sensibles és una altra opció dels gràfics GIF. Fins ara haviem vist que una imatge pot contenir un link. Però pot donar-se el cas de que una sola imatge pugui tenir varis links, com podria ser una imatge contenint un mapa, les zones de l'empresa, els departaments d'una botiga, etc.

Hi ha dues formes de treballar amb mapes. El primer sistema, en que nosaltres definim les àrees d'una imatge, i les coordenades estan en un arxiu independent, i està ubicat en el servidor i està gestionat per una aplicació especial. És l'ús de IMG i ISMAP.

El segon mètode, les coordenades estan en el mateix arxiu de la pàgina Web que estem visualitzant. Això dóna com a resultat que el temps de resposta sigui molt més curt, al no haver de consultar-se en el servidor i tornar. És l'ús de MAP i USEMAP.
Un mapa d'imatge per a client (Client Side Image Maps) codifica l'adreça URL de destí de cada zona activa directament en el mapa d'imatge. Els mapes d'imatges per a clients no necessiten processament del servidor del Web per a resoldre el destí d'un vincle basat en les coordenades del cursor.

Ús de ISMAP (o resol.lució de les coordenades pel servidor http)

ISMAP és un atribut de l'element IMG. Si l'usuari selecciona algun lloc de la imatge anclada, el visualitzador automàticament calcula la coordenada a on s'ha fet el click, i genera l'adreça de l'enllaç afegint al final d'aquesta, el signe interrogant (?) i les coordenades x i y del pixel seleccionat. Perque aquesta propietat funcioni, cal que el servidor de la pàfina Web, tingui instal.lat el corresponent programa de gestió d'enlaços d'imatges de mapes.

El gràfic que es mostra a continuació està definit amb ISMAP, encara que no torna contesta, però al passar el mouse per sobre d'ell, ja veiem que automàticament el visualitzador calcula la posició de les coordenades x i y d'on apunta el cursor, sent l'inici de les coordenades a l'extrem superior esquerra de la imatge.

A tall d'explemple, si apuntéssim el cursor a la punta superior dreta de la lletra C, aproximadament tindriem una resposta similar a: http://quest.sole.es/cgi-bin/sol?133,17

Ús de MAP (o resol.lució de coordenades en la pròpia pàgina)

La forma més senzilla a nivell d'usuari és fer servir un programa de retoc fotogràfic, com Map Edit, MapThis, o inclús d'edició de pàgines Web, com FrontPage, per a defirnir, d'una forma molt ràpida, el lloc en que ha d'estar un link. Les coordenades, per extenses que siguin, les crea el programa.

L'estructura de l'ús de MAP és la següent:

Al grup de coordenades o link d'una imatge concreta, amb 1 o més link se li dona un nom, per a posteriorment fer-ne referència.
Es defineixen les coordenades per a cada link que volguem fer, amb l'opció de triar diferents tipus d'àrees, com poden ser POLIGONS, CERCLES O RECTANGLES amb l'element AREA.
A l'acabar la definició de cada link, es dona referència de l'adreça URL en que un cop l'usuari cliqui, volguem portar-lo. Aquest URL pot ser d'adreça relativa o absoluta.
Un cop acabada la definició de tots els links de la imatge, s'inserta el gràfic amb l'atribut USEMAP= i el nom que anteriorment hem fet referència al conjunt de coordenades.
En cas de que en alguna imatge, volguem deixar un tros sense linkar, es pot fer servir l'element NOHREF, per a indicar que en aquella coordenada no hi ha cap link. De la mateixa forma, si no es defineix, per defecte tampoc no fa referència a cap link.

Exemple de d'una imatge sensible amb 1 link, de forma circular (CIRCLE):

Exemple de d'una imatge sensible amb 3 links, de forma rectangular (RECT):

Exemple de d'una imatge sensible amb 2 links, en forma de polígon (POLYGON):

<HTML>
<HEAD>
<TITLE> Mapa Ibèric </TITLE>
</HEAD>
<BODY>

*© Melcior Oliveras 1998 melcior@intercom.es*