12.176 cursos gratis
8.741.731 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Creación de Paginas Web con Html

Autor: Jean Carlo Romero Raffo
Curso:
9/10 (16 opiniones) |32353 alumnos|Fecha publicaciýn: 26/05/2005
Envýa un mensaje al autor

Capýtulo 13:

 Mapas

Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:

Mapas gestionados por el cliente (el navegador). Mapas gestionados por el servidor.

Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del estándar HTML 2.0. Sin embargo, nunca hubo una manera común de gestionar esos mapas. Debido a ello, Netscape elaboró un sistema propio que fue incluido en el estándar 3.2: los mapas gestionados por el navegador.

13.1. Mapas gestionados por el cliente

Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:

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

Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:

ParámetroUtilidad
SHAPEDefine la forma de la zona, que podrá ser rectangular, circular o poligonal.
COORDSCoordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona.
HREFURL a donde irá el usuario si pulsa sobre esa zona.
NOHREFEspecifica que esa zona no tiene asignado enlace alguno.
ALTTexto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace.

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

SHAPECOORDS
RectangularRECT"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
CircularCIRC"x,y,radio" siendo (x,y) el centro del círculo y radio su... eehh.. ¿cómo lo diría yo? ¿Su radio?.
Polígono irregularPOLY"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 imagenDEFAULTNo se indican.

13.2. Cómo usar un mapa

Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:

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

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.netscape.com" ALT="Netscape"> <AREA SHAPE=RECT COORDS="26,0,53,31" HREF="http://www.microsoft.com" ALT="Microsoft"> <AREA SHAPE=DEFAULT NOHREF ALT="Nada"> </MAP> <IMG SRC="nav.gif" WIDTH=53 HEIGHT=31 BORDER=0 USEMAP="#navegadores">  

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 con el ratón donde no debe.

Capýtulo siguiente - Tablas

Nuestras novedades en tu e-mail

Escribe tu e-mail:



MailxMail tratarý tus datos para realizar acciones promocionales (výa email y/o telýfono).
En la polýtica de privacidad conocerýs tu derechos y gestionarýs la baja.

Cursos similares a Creación de Paginas Web con Html



  • Výdeo
  • Alumnos
  • Valoraciýn
  • Cursos
1. Creación de un Cyber
En este curso se enseña como crear un cyber própio de una manera fácil. Descubre... [09/06/05]
13.237  
2. Posicionamiento Web
El posicionamiento en los buscadores es un factor clave para una empresa. El 75% de... [30/05/08]
1.150  
3. Creación de páginas. Wordpress
Aprende a crear una página y adjuntarla a tu sitio web, la experta te trae el paso... [03/11/11]
139
Curso con video

ýQuý es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail