Tema: Mapas en Html
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 30/07/2010, 12:48
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Mapas en Html
agustin81net:
Lo que sigue funciona mas o menos asi:
Al darle click a un link, te muestra una capa posicionada y te dirije a un ancla dentro de la capa, cuando usas otro link, oculta las otras capas visibles, es decir sólo una capa permanece a la vista. Lo que no tengo muy claro es que tu mapa .jpg sea tan grande que se extienda por debajo del limite inferior de la ventana. si no es asi, eliminaria las anclas y me limitaria a mostrar la capa que invoque el link en cuestion. En el caso de que el mapa haga scroll hacia abajo y tengas una capa posicionada ahi, deberás buscar la forma de que tu menu con los linkds quede siempre visible, tal vez con una capa que este "fixed", analiza los hide y show de la función (que por otra parte, y como intuyo que usaste el dreamweaver, la función es justamente una librería de dreamweaver y la puedes aplicar desde Comportamientos/mostrar-ocultar capas)


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Mostrar - ocultar varias capas</title>
  6. <style type="text/css">
  7. <!--
  8. #lmcampos {
  9.     position:absolute;
  10.     width:200px;
  11.     height:115px;
  12.     z-index:1;
  13.     left: 396px;
  14.     top: 23px;
  15.     background-color: #009900;
  16.     visibility: hidden;
  17. }
  18. #cabildo {
  19.     position:absolute;
  20.     width:200px;
  21.     height:115px;
  22.     z-index:2;
  23.     left: 399px;
  24.     top: 163px;
  25.     background-color: #33CCFF;
  26.     visibility: hidden;
  27. }
  28. #dorrego {
  29.     position:absolute;
  30.     width:200px;
  31.     height:115px;
  32.     z-index:3;
  33.     left: 400px;
  34.     top: 1307px;
  35.     background-color: #9966FF;
  36.     visibility: hidden;
  37. }
  38. -->
  39. </style>
  40. <script type="text/javascript">
  41. <!--
  42. function MM_showHideLayers() { //v9.0
  43.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  44.   for (i=0; i<(args.length-2); i+=3) 
  45.   with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
  46.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  47.     obj.visibility=v; }
  48. }
  49. //-->
  50. </script>
  51. </head>
  52.  
  53. <body>
  54. <a href="#lmcamposx" onclick="MM_showHideLayers('lmcampos','','show','cabildo','','hide','dorrego','','hide')">Av.Luis M. Campos</a>
  55. <br />
  56. <br />
  57. <a href="#cabildox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','show','dorrego','','hide')">Av.Cabildo</a>
  58. <br />
  59. <br />
  60. <a href="#dorregox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','hide','dorrego','','show')">Av.Dorrego</a>
  61. <br />
  62.  
  63.  
  64. <div id="lmcampos"><a name="lmcamposx">Av. Luis M. Campos</a></div>
  65. <div id="cabildo"><a name="cabildox">Av. Cabildo</a></div>
  66. <div id="dorrego"><a name="dorregox">Av. Dorrego</a></div>
  67. </body>
  68. </html>

Saludos