Scribd
Cargar
1K vistas7 páginas

Mapas Sensibles HTML: Guía y Ejemplo

Este documento explica cómo crear mapas sensibles en HTML utilizando las etiquetas <img>, <map> y <area>. Se define una imagen con <img> y el atributo usemap, luego dentro de <map> se especifican las diferentes áreas de la imagen con <area>, indicando su forma, coordenadas y enlace. Como ejemplo, se muestra un mapa dividido en 6 áreas rectangulares, cada una enlazada a una página diferente.

Cargado por

Oscar Ortega
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
1K vistas7 páginas

Mapas Sensibles HTML: Guía y Ejemplo

Este documento explica cómo crear mapas sensibles en HTML utilizando las etiquetas <img>, <map> y <area>. Se define una imagen con <img> y el atributo usemap, luego dentro de <map> se especifican las diferentes áreas de la imagen con <area>, indicando su forma, coordenadas y enlace. Como ejemplo, se muestra un mapa dividido en 6 áreas rectangulares, cada una enlazada a una página diferente.

Cargado por

Oscar Ortega
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd

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

También podría gustarte