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 : <script type="text/JavaScript"> <!-- function MM_popupMsg(msg) { //v1.0 alert(msg); } //--> </script>

el siguiente código lo deben agregar justo después de : <div id="content"> <img src="mapa arriba talleres.jpg" width="720" height="198" border="0" align="right" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="294,8,427,197" href="http://rapidshare.de/files/35967042/RHVDDestinyStreetNG40.zip" alt="RICHARD HELL 6 THE VOIDOIDS - DESTINY STREET" /><area shape="rect" coords="436,8,572,223" href="http://rapidshare.com/files/1889611/SexPistolscovers.zip" alt="SEX PISTOLS - LIVE AT CHELMSFORD PRISON" /><area shape="rect" coords="581,10,714,268" href="http://rapidshare.de/files/36661882/DBLACBGB77NG40.zip" alt="DEAD BOYS - LIVE AT CBGB'S 1977" /> <area shape="rect" coords="149,8,288,248" href="#" onclick="MM_popupMsg('NO HAY DIRECCIÓN DISPONIBLE')" /> <area shape="rect" coords="9,9,142,221" href="#" onclick="MM_popupMsg('NO HAY DIRECCIÓN DISPONIBLE')" /> </map>

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: