Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 969 vistas

    Mapas Sensibles en HTML

    Cargado por

    Oscar Ortega
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd

    Mapas Sensibles en HTML

    Cargado por

    Oscar Ortega
    969 vistas7 páginas
    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.

    Descripción original:

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Descargar como pptx, pdf o txt
    969 vistas7 páginas

    Mapas Sensibles en HTML

    Cargado por

    Oscar Ortega
    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.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Descargar como pptx, pdf o txt
    de 7

    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