Mapas de imagen
Que es un mapa de imagen?
Como aprendiste en el capitulo 12 una imagen puede servir de link tanto interno como externo
, pero es limitado pues solo podemos hacer un link por imagen, en cambio con un mapa de imagen podrás hacer varios links en una misma imagen, muchos sitios web lo usan en vez de frames creando una imagen
como índice, entendido el concepto aquí lo tenes:
Para crearlo usa la etiqueta "MAP" de la siguiente manera:
< MAP NAME="nombre para el mapa" >
< /MAP >
El nombre lo debes asociar a la imagen que usaras como mapa de esta forma:
< IMG SRC="pulsadr1.gif" USEMAP="#nombre que le diste al mapa" >
Propiedades del mapa:
Para indicar que partes de la imagen serán link existe la etiqueta "SHAPE(figura)" para indicar que tipo de figura
deseamos, podemos escoger entre:
- "RECT"
- "CIRCLE"
- "POLYGON"
El primero (RECT) es el para usar un área rectangular, debes indicar los puntos en el eje 'x' y 'y' de la esquina superior izquierda
y de la esquina inferior derecha, para este fin usa un programa que te facilita la lectura de coordenadas, existen infinidad de ellos.
Ejemplo:
< AREA SHAPE="RECT" COORDS=46,40,250,75 HREF="link al que debe ir.html" >
El segundo (CIRCLE) es el circulo, debes indicar el centro del circulo y el radio del mismo en pixels.
Ejemplo:
< AREA SHAPE="CIRCLE" COORDS=50,70,270 HREF="link al que debe ir.html" >
Él ultimo (POLYGON) es el polígono, con el puedes crear cualquier figura simplemente indica las coordenadas x1,y1,x2,y2....xn,yn,
la ultima coordenada 'x' y 'y' que indiques se unirá automáticamente a la primera.
Ejemplo:
< AREA SHAPE="POLYGON" COORDS=x1,y1,x2,y2,x3,y3,...xn,yn HREF="dirección_de_la_página" >
Por ultimo si colocas el siguiente código:
<AREA SHAPE="DEFAULT" NOHREF> Podrás indicar a donde ir si da click en un área no definida.
Full ejemplo:
<MAP NAME="mapa">
<AREA COORDS=11,44,128,66 HREF="diseñoweb1.html" SHAPE=RECT>
<AREA COORDS=3,72,202,111 HREF="disenoweb2.html" SHAPE=RECT>
<AREA COORDS=12,121,174,140 HREF="disenoweb3.html" SHAPE=RECT>
<AREA COORDS=8,151,182,169 HREF="disenoweb4.html" SHAPE=RECT>
<AREA COORDS=4,178,313,199 HREF="disenoweb5.html" SHAPE=RECT>
<AREA COORDS=2,210,315,232 HREF="disenoweb6.html" SHAPE=RECT>
<AREA COORDS=4,237,312,254 HREF="disenoweb7.html" SHAPE=RECT>
<AREA COORDS=5,269,313,283 HREF="disenoweb8.html" SHAPE=RECT>
<AREA COORDS=8,302,175,313 HREF="disenoweb9.html" SHAPE=RECT>
<AREA COORDS=6,316,180,333 HREF="disenoweb10.html" SHAPE=RECT
<AREA COORDS=5,349,61,356 HREF="disenoweb11.html" SHAPE=RECT>
<AREA COORDS=4,375,165,383 HREF="disenoweb11.html" SHAPE=RECT>
<AREA COORDS=8,401,192,412 HREF="disenoweb12.html" SHAPE=RECT>
<AREA COORDS=13,425,61,439 HREF="disenoweb13.html" SHAPE=RECT>
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<<IMG SRC="ima/mapa.html" USEMAP="#mapa" >
[email protected]
atras Indice siguiente