Post on 22-Nov-2014
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