h1

Mapa de Imágenes o Image Map

15 diciembre 2008

Siguiendo con la serie de entradas sobre rendimiento web, quería explicar un poco más que es un mapa de imágenes. Un mapa de imágenes es una imagen con areas sobre las que se puede establecer un link. Las hay de dos tipos del lado del cliente y del lado del servidor,  las del lado del cliente son mejores de cara al rendimiento, ya que, no requiere de una petición al back-end, aunque son menos flexibles que las del lado del servidor.

A continuación pondré un código de ejemplo de un mapa de imágnes del lado del cliente. Para usar esta técnica lo único que hay que hacer es establecer las coordenadas de cada area y el link de dicha area. Por ejemplo:

<MAP NAME=”map1″>
<AREA  HREF=”enlace1.html” ALT=”alt1″ TITLE=”titulo1″   SHAPE=RECT COORDS=”6,116,97,184″>
<AREA  HREF=”enlace2.html” ALT=”alt2″ TITLE=”tutilo2″  SHAPE=CIRCLE COORDS=”251,143,47″>
</MAP>

<IMG SRC=”imagen.gif”  ALT=”alt de la imagen” BORDER=0 WIDTH=300 HEIGHT=300 USEMAP=”#map1″><BR>

En la configuración del mapa vemos los siguientes atributos:

href: url del enlace

alt: alt del enlace

title: título del enlace

shape: forma de la figura que puede ser:  default|rect|circle|poly

coords: Que son las coordenadas del area que se definde de la siguiente forma:

  • rect: left-x, top-y, right-x, bottom-y.
  • circle: center-x, center-y, radius. 
  • poly: x1, y1, x2, y2, …, xN, yN. La primera x e y deberían ser la misma que xN e yN para cerrar el polígono.
Anuncios

4 comentarios

  1. la verdad es que parece un tema interesante, y los demás contenidos tambien son de especial interés.


    • Gracias, uno hace lo que puede.
      Un saludo


  2. Hola, estoy haciendo un trabajo con GWT y me gustaria saber si existe algun panel que realice una cosa como esta. Gracias



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: