Mapas en Html

agustin81net · #1 (**permalink**) 30/07/2010, 04:33

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!

caricatos · #2 (**permalink**) 30/07/2010, 04:40

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

agustin81net · #3 (**permalink**) 30/07/2010, 07:19

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....

caricatos · #4 (**permalink**) 30/07/2010, 10:44

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

emprear · #5 (**permalink**) 30/07/2010, 12:48

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mostrar - ocultar varias capas</title>
<style type="text/css">
<!--
#lmcampos {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 396px;
    top: 23px;
    background-color: #009900;
    visibility: hidden;
}
#cabildo {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 399px;
    top: 163px;
    background-color: #33CCFF;
    visibility: hidden;
}
#dorrego {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    left: 400px;
    top: 1307px;
    background-color: #9966FF;
    visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
 
<body>
<a href="#lmcamposx" onclick="MM_showHideLayers('lmcampos','','show','cabildo','','hide','dorrego','','hide')">Av.Luis M. Campos</a>
<br />
<br />
<a href="#cabildox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','show','dorrego','','hide')">Av.Cabildo</a>
<br />
<br />
<a href="#dorregox" onclick="MM_showHideLayers('lmcampos','','hide','cabildo','','hide','dorrego','','show')">Av.Dorrego</a>
<br />
 
 
<div id="lmcampos"><a name="lmcamposx">Av. Luis M. Campos</a></div>
<div id="cabildo"><a name="cabildox">Av. Cabildo</a></div>
<div id="dorrego"><a name="dorregox">Av. Dorrego</a></div>
</body>
</html>

Saludos

agustin81net · #6 (**permalink**) 06/08/2010, 04:57

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!!!!

agustin81net · #7 (**permalink**) 06/08/2010, 08:18

a muchachos otra cosa

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

como lo hago???

chauuuuuuuuuu

emprear · #8 (**permalink**) 06/08/2010, 08:51

agustin81net

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

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

Saludos