Mapas y mensajes emergentes
Los blogs son utilizados con mucha frecuencia para compartir música y videos. El taller de hoy se basa en esa cualidad que ofrecen los blogs y les brindará las herramientas necesarias para poder hacer vínculos más atractivos a la hora de la navegación.
El primer ejercicio consiste en generar un mapa de navegación similar al que se encuentra debajo del encabezado de este blog. La idea es hacer hipervínculos diferentes dependiendo del área en el cual se encuentre el cursor. He colocado 5 discos y los lugares en los que los pueden descargar gratuitamente 3 de ellos; los otros dos sueltan un mensaje emergente con el texto que indica que no hay dirección disponible para la descarga.
lo primero que deben hacer es generar una imagen de 600 pixeles de ancho (a lo sumo), subirla a blogger ( en este caso la imagen se encuentra en: http://photos1.blogger.com/blogger/6612/3401/1600/mapa%20arriba%20talleres.2.jpg y tiene un ancho de 600 x 180 pixeles). A continuación, deben agregar el siguiente código entre las etiquetas
:
el siguiente código lo deben agregar justo después de :
DESCRIPCIÓN DEL CÓDIGO:
La imagen fuente (en este caso la de los discos) corresponde a http://photos1.blogger/...... etc
Como quiero que las areas seleccionadas sean rectangulos area shape="rect", si se quieren circulares, se coloca area shape="circle".
las coordenadas se definen en el vector (x1,x2,x3,x4); en donde
x1 = Distancia en pixeles de la abcisa que se mide desde la esquina superior izquierda hasta el punto en donde comienza el rectángulo.
x2= Distancia en pixeles de la ordenada que se mide desde la esquina superior izquierda hasta el punto en donde comienza el rectángulo.
x3= El ancho del rectángulo
x4= la altura del rectángulo.
El lugar a donde llega el vínculo corresponde a href="http://........."
El texto que se quiere que aparezca cuando el puntero del mouse se encuentra sobre el rectángulo se agrega con ALT="lo que quiera poner acá". El mensaje se coloca justo en los paréntesis después de MM_popupMsg:
