Crea tu Web: Indice de diseño

Ahora también
> HTML versión 5 <
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Mapas de imágenes
      Mapas

      Recordemos que los enlaces en las páginas web podían escribirse con un texto o con una imagen. Es decir podíamos tener una imagen que al ser pulsada con el ratón nos llevaba a otra página. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:

      • Gestionando el mapa en el navegador.
      • Gestionando el mapa en el servidor.

      Los más utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no exigen ningún apoyo del servidor y por tanto los puede usar cualuier webmaster en su propia página.

      arriba


      Mapas lado cliente

      Un mapa no es más que una imagen en la que se definen zonas activas, o sea, zonas que al ser pulsadas con el ratón actúan como un enlace y nos llevan a otras páginas. Su creación tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen:

      <MAP NAME="mapa_enlaces">
        <AREA SHAPE=... COORDS=... ALT="Enlace a..">
        ...
      </MAP>

      La descripción del mapa es de lo más simple: le damos nombre (para luego poderle asociar la imagen) y definimos las zonas activas (formas geométricas como verás a continuación):

      Parámetro Significado
      SHAPE Define la forma de la zona: rectangular, circular o poligonal.
      COORDS Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la forma.
      HREF URL del enlace corespondiente a esta zona.
      NOHREF Zona inactiva
      ALT Texto alternativo, etiqueta idéntica al ALT de IMG

      Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:

       

      SHAPE COORDENADAS
      Rectangular RECT "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
      Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio.
      Polígono irregular POLY "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono.
      Toda la imagen DEFAULT No se necesitan
      arriba


      Usando los mapas

      Una vez definido como es el mapa lo aisgnamos a una imagen:

      <IMG SRC=... USEMAP="#mapa_enlaces">

      Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una almohadilla (#). Vamos a ver un ejemplo:

      <MAP NAME="navegadores">
        <AREA SHAPE=RECT COORDS="0,0,24,31"
              HREF="http://www.apache.org" ALT="Servidor Apache">
        <AREA SHAPE=RECT COORDS="26,0,53,31"
              HREF="http://www.w3c.org" ALT="la W3C">
        <AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
      </MAP>
      <IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">

      Se ve tal que así:

      Servidor Apache la W3C

      Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce a ningún URL por si el usuario pulsa fuera de las zonas activas.

      arriba


      Comunidad Virtual. Alojamiento gratis