Mapas sensibles en HTML

ER ETW ICS Oscar Augusto Moreno Ortega

Twitter @dark666link

Ejemplo de uso cotidiano

Requisitos

1. Una imagen GIF o JPG

2. Incrustar la imagen con el tag <img>• <IMG SRC="mapa.gif" USEMAP="#map1" ISMAP>

• SRC – La dirección donde se ubica el mapa• USEMAP – Identificador para posteriormente configurar los

diferentes puntos dentro de la imagen.• ISMAP – Para asegurar que se procese la imagen como n

mapa

Definiendo los puntos

• <MAP NAME="map1">• <AREA SHAPE="RECT" COORDS=" 35, 37,137,117" HREF="admision.html">• <AREA SHAPE="RECT" COORDS="144, 39,244,117" HREF="cursos.html">

• </MAP>

• MAP NAME – Igual al nombre que definimos en el <IMG>• AREA SHAPE – Puede ser de diferentes formas

• RECT x – izquierda, y – superior, x – derecha, y - inferior• CIRCLE x – centro, y – centro, radio• POLY x1, y1, x2, y2…xn, yn

• COORDS – Los puntos que delimitaran nuestra área• HREF – link al que se dirigirá el usuario al hacer clic sobre el área

Ejemplo

• <IMG SRC="mapa.gif" USEMAP="#map1" ISMAP>• <MAP NAME="map1">

• <AREA SHAPE="RECT" COORDS=" 35, 37,137,117" HREF="admision.html">• <AREA SHAPE="RECT" COORDS="144, 39,244,117" HREF="cursos.html">• <AREA SHAPE="RECT" COORDS=" 35,126,243,185"

HREF="profesores.html">• <AREA SHAPE="RECT" COORDS=" 37,192,141,267" HREF="becas.html">• <AREA SHAPE="RECT" COORDS="146,192,241,268" HREF="contacto.html">• <AREA SHAPE="RECT" COORDS=" 88,277,178,296" HREF="retorno.html">

• </MAP>

Ejercicio

1. Crear un mapa a partir de una imagen dada (ejercicio1.gif)2. Definir sus coordenadas y referenciar de la siguiente manera:

• Punto 1 – pagina1.html• Punto 2 – pagina2.html• Punto 3 – pagina3.html

Bibliografía

• http://www.cs.buap.mx/~mmartin/html/Clase5/Clase5.html