Foros del Web » Creando para Internet » HTML »

Mapas en Html

Estas en el tema de Mapas en Html en el foro de HTML en Foros del Web. Muchachos estoy trabajando con un mapa de calles que en teoría es nada mas che un gran .jpg para la compu ahora bien los lugares ...
  #1 (permalink)  
Antiguo 30/07/2010, 05:33
 
Fecha de Ingreso: julio-2010
Ubicación: Trieste Italia
Mensajes: 4
Antigüedad: 7 años, 4 meses
Puntos: 0
Busqueda Mapas en Html

Muchachos estoy trabajando con un mapa de calles que en teoría es nada mas che un gran .jpg para la compu ahora bien los lugares de interés estan "mapeados con links" mi gran problema es que cree un indice de calles con un linck obviamante a la parte del mapa con un anclaje de este modo

<a href="http://www.forosdelweb.com/f4/mapaA1B2.html#AvenidaDorrego" target="_blank">

cuando uno clica en el indice Dorrego Av. sabemos que me llevara sobre la ancla dentro del gran .jpg y poder ver donde esta esta av.

ahora bien mi pregunta es esta:

-como programo que al llegar este señalado con un icono tipo cuando buscamo en google y nos aparece la calle ya señalada.

bueno gracias y un saludo!

Última edición por agustin81net; 30/07/2010 a las 08:37
  #2 (permalink)  
Antiguo 30/07/2010, 05:40
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapas en Html

Hola:

Si el mapa está entero, simplemente ponlo dentro de una capa con posicionado relativo, y las mismas dimensiones del propio mapa (incluso ese mapa podría ser el fondo de la capa... luego, las señales, podrían ser pequeñas imágenes que simplemente tengan posicionamiento absoluto y las coordenadas de la calle.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 30/07/2010, 08:19
 
Fecha de Ingreso: julio-2010
Ubicación: Trieste Italia
Mensajes: 4
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Mapas en Html

el mapa esta dentro un div que tiene posicion relativo (como me decis vos)de esta forma

<div id="mapa">
<img src="img/mapaA1B2.jpg" alt="mapa" />
</div>

sobre la imagen donde esta la calle meti un div pequeño con posición absoluta dentro esta el anclaje.

<div id="apDiv1"><a name="AvenidaDorrego" id="AvenidaDorrego"><img src="file:///E|/Web/ancleje/flechia.png"</a></div>

ser ve esta imagen siempre, solo tendria que aparecer si uno pasa sobre con el mouse
osea cuando se redirecciona el linck al anclaje este esta como clicado ahi tendria que aparecer la imagen, luego haciendo click en cualquier otra parte tendría que desapareces si no tendría toda la imagen tachada de indicadores y estamos en lo mismo.

gracias = mente por tu respuesta saludos....
  #4 (permalink)  
Antiguo 30/07/2010, 11:44
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapas en Html

Hola:

Creo que necesitas usar javascript... lo más parecido que yo haya hecho es esto: Polígonos Industriales... con el evento mouseover se muestra la capa y con mouseout se oculta... la cuestión es tener las imágenes con un estilo y luego cambiarlo...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 30/07/2010, 13:48
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Mostrar - ocultar varias capas</title>
  5. <style type="text/css">
  6. <!--
  7. #lmcampos {
  8.     position:absolute;
  9.     width:200px;
  10.     height:115px;
  11.     z-index:1;
  12.     left: 396px;
  13.     top: 23px;
  14.     background-color: #009900;
  15.     visibility: hidden;
  16. }
  17. #cabildo {
  18.     position:absolute;
  19.     width:200px;
  20.     height:115px;
  21.     z-index:2;
  22.     left: 399px;
  23.     top: 163px;
  24.     background-color: #33CCFF;
  25.     visibility: hidden;
  26. }
  27. #dorrego {
  28.     position:absolute;
  29.     width:200px;
  30.     height:115px;
  31.     z-index:3;
  32.     left: 400px;
  33.     top: 1307px;
  34.     background-color: #9966FF;
  35.     visibility: hidden;
  36. }
  37. -->
  38. <script type="text/javascript">
  39. <!--
  40. function MM_showHideLayers() { //v9.0
  41.  var i,p,v,obj,args=MM_showHideLayers.arguments;
  42.  for (i=0; i<(args.length-2); i+=3)
  43.  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
  44.    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  45.    obj.visibility=v; }
  46. }
  47. //-->
  48. </head>
  49.  
  50. <a href="#lmcamposx" onclick="MM_showHideLayers('lmcampos','','show','cabildo','','hide','dorrego','','hide')">Av.Luis M. Campos</a>
  51. <br />
  52. <br />
  53. <a href="#cabildox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','show','dorrego','','hide')">Av.Cabildo</a>
  54. <br />
  55. <br />
  56. <a href="#dorregox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','hide','dorrego','','show')">Av.Dorrego</a>
  57. <br />
  58.  
  59.  
  60. <div id="lmcampos"><a name="lmcamposx">Av. Luis M. Campos</a></div>
  61. <div id="cabildo"><a name="cabildox">Av. Cabildo</a></div>
  62. <div id="dorrego"><a name="dorregox">Av. Dorrego</a></div>
  63. </body>
  64. </html>

Saludos
  #6 (permalink)  
Antiguo 06/08/2010, 05:57
 
Fecha de Ingreso: julio-2010
Ubicación: Trieste Italia
Mensajes: 4
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Mapas en Html

bueno muchachos gracias voy a probar con sus consejos...

desde ya agradezco la ayuda

en cuanto lo termine meto el código limpio asi si alguno lo puede utilizar o mejorar.

estoy probando de hacerlo gigante con cuadrantes longitudinales y verticales como es un mapa uno al lado del otro. así se carga la imagen mas rápido...

uff creo que me faltara un poco de conocimiento de JS.

saludos!!!!
  #7 (permalink)  
Antiguo 06/08/2010, 09:18
 
Fecha de Ingreso: julio-2010
Ubicación: Trieste Italia
Mensajes: 4
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Mapas en Html

a muchachos otra cosa

para agarrar la imagen y moverla con el mouse alguien sabría ayudarme !!!!

como lo hago???

chauuuuuuuuuu
  #8 (permalink)  
Antiguo 06/08/2010, 09:51
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Mapas en Html

agustin81net

http://www.codelifter.com/main/javas...ablelayer.html

Para más métodos y ejemplos Googlea con Dragable Layer


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: agustin81net, cursor, iconos, mapas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:59.