Ante todo debemos definir lo que es un mapa interactivo. un mapa interactivo, no es más que una cierta zona (normalmente grafica), en la pagina WEB, que dependiendo en donde pinchemos sobre ella con el ratón, nos encauza a otra dirección URL determinada y definida sobre esa área en particular. Hay 2 tipos de Mapas interactivos que son, los modo local (desde la propia página que bajamos y en nuestro propio equipo), y en modo servidor. Nada diferencia externamente a un mapa interactivo, del resto de las imágenes del servidor. Pueden ser más grandes (a veces no), y tener alrededor textos que advierten sobre su uso (aunque a veces suele ser tan evidente que se evitan); pero por lo demás en poco se diferencian de un gráfico cualquiera. Parecen un gráfico con enlaces, pues pueden tener borde y el puntero del cursor (ratón), adopta la misma forma que cuando se encuentra sobre un enlace. Sin embargo, los mapas son imágenes activas asociadas a enlaces (o accciones). Cuando el usuario hace un click sobre un punto del mapa, recibe como respuesta del servidor una página determinada (ya sea mapa en modo local o en modo servidor). Como hemos icho anteriormente, hay 2 formas de crear un mapa sensible. Una es en modo servidor (por lo que dependemos del servidor correspondiente en donde tengamos alojada la página WEB), por lo que como considero que no es muy factible, y que no todas las personas podrán acceder a este tipo de servicio (ya que no todos los servidores lo soportan), me voy a centrar en el segundo método. En modo cliente. Mapas en modo CLIENTE Es una nueva funcionalidad que soportan la mayoría de los navegadores más populares (por lo menos Netscape...). Se trata de incluir los comandos propios del fichero que tiene las coordenadas de las dintintas áreas que definen el mapa sensible y sus correspondientes direcciones URL a páginas WEB en el propio código HTML de la página. En los mapas en modo cliente es el navegador quien calcula la posición del cursor y el que busca la URL correspondiente, siendo esta la única petición que hace el servidor lo que mejora notablemente al velocidad de respuesta. NOTA: Si fuera un mapa en modo cliente, una vez traida la página a nuestro visor, y al pinchar sobre el mapa (si estuviera en modo servidor), el navegador le enviaría la información de la posición del click al servidor, y éste calcularía el área al que corresponde dicho click, y daría la página que estuviera predeterminada en esa posición del área, lo que hace un poco más lenta la tranferencia de la página, y los cálculos sobre el mapa interactivo. La sintaxis HTML que soporta esta forma de trabajar se basa en la inclusión del atributo USEMAP en la directiva de <IMG> que indica que se trata de una imágen que se va a emplear como un mapa cliente. <IMG SRC=�/images/mapa.gif� USEMAP=�#mapa�>Esta directiva carga la imágen mapa.gif, y le asigna las áreas de mapa, definidas en el mismo documento HTML, en la parte denominada �#mapa�. La definición de mapa cliente está limitada por la directiva <MAP>...</MAP>. En su atributo NAME se inserta el nombre de la definición (en nuestro caso �#mapa�). Dentro de esta sección de código, se incluyen las directivas <AREA> que definene cada una de las áreas de la imagen. <AREA> tiene los siguientes atributos OBLIGATORIOS:
Si 2 áreas se superponen, se iniciará la que esté en primer lugar en la definición del mapa. Es importante (aunque en absoluto necesario), definir una última área que abarque la totalidad del gráfico que empleamos como imagen mapa, para direccionar a una URL �por defecto�, con el objeto de contemplar el caso de que se pulse sobre un área no definida en el código. Esto como ya he dicho no es necesario, ya que si una determinada área de la imagen no quedara definida, como no lo está, al pinchar sobre ella, no pasaría nada, por lo que nuestro inteligente visitante... sabría que está pinchando sobre un área de la imagen que actúa como mapa sensible, sin definir. Normalmente se suele definir el URL �por defecto�, sólo en caso de un mapa interactivo, con excesivas áreas definidas, y muy proximas entre sí, para indicar que la zona pinchada, no es la que visualmente se pretendía indicar... un ejemplo sería una imagen del mundo el la que europa se viera muy peque�a, y al querer pinchar sobre las Islas Baleares, y debido al peque�o tama�o de la imagen, pinchamos en Córcega... Una vez definida la imagen que actuará como mapa, definamos el mapa: (para el ejemplo se supondrá una casa compuesta de un cuadrado, con un triangulo encima, un rectángulo vertical de puerta, y con un arbol al lado de la casa...) <IMG SRC=�/images/casa.gif� USEMAP=�#casa�>y el mapa:
<MAP NAME=�casa�>* Debido a que muy pocas personas (yo no conozco a ninguna...), saben posicionar exactamente las posiciones X, Y de los pixels de los que se compone una pantalla de ordenador, y debido a que es necesario para las definiciones de las áreas de las que se compone el mapa sensible, hay una serie de programas que pese a no llevarme comisión por su uso... (lástima, sino ahora sería Javier Górriz �Gates�... :oP), te recomiendo desde estas páginas debido a su extrema utilidad en la creación de mapas interactivos a partir de una imagen: Paint Shop Pro y Map This. Ambos son programas Shareware, de modo que no es neceario un pago para su uso, en principio, teniendo un tiempo delimitado de prueba del programa, transcurrido el cual y en conciencia, deberemos de registrar pagando una cantidad ínfima por el empleo del programa... (gente sin conciencia como yo... nos olvidamos de pagar... ;oP). Paint Shop Pro es un programa de retoque gráfico de multitud de formatos gráficos, y que nos da las coordenadas de la posición del cursor al situarlo sobre la imagen, lo que nos será muy útil a la hora de definir nuestras áreas sobre nuestra imagen que actuará de mapa sensible. Map This, en cambio, es un programa infinitamente más útil que el anterior, para el propósito aquí expuesto, ya que de una forma visual, podemos cargar la imagen que emplearemos como mapa, en el programa mismo, y podremos definir sobre ella directamente las áreas que deseemos así como las direcciones URL a las que apuntarán las distintas áreas... �� Y no sólo eso, sino que además nos generará el códigop HTML necesario para que nosotros sólo tengamos que introducirlo tal cual en nuestra página HTML que contendrá la definición del mapa...!! �� Fácil, ��no??!!. Con estas 2 herramientas, y con un poco de paciencia para poder aprender a manejarlas (ambas están en ingles), podremos hacer la labor de crear nuestros mapas interactivos, una tarea mucho más entretenida, y menos laboriosa. |
