07/03/2004, 13:12
| |||
| |||
| mapas enlaces Me gustaria que alguien me comunicase yo intento que al pasar el raton por un texto o foto el resultado de su ubicacion se refleje en un punto de un mapa para saber donde esta situado, es decir ejemplo ; paso con el raton por el nombre El Escorial y entonces en un plano de Madrid deberia de mostrarse con un punto rojo el lugar donde esta ubicado tienes la solucion ?
__________________ Saludos acaser www.turiscan.com |
|
07/03/2004, 14:02
| |||
| |||
| Eso se puede hacer con JavaScript. Con el evento "onmouseover" de un "MAP" controlas la posicion "x,y" de un pequeño gif. Tiene su dificultad y trabajo... ojo es muy importante controlar la diferencia entre Explorer y Netscape, pues no funcionan igual. En aparecer Tunait... zas!!! te envía para JavaScript. Saludos |
|
07/03/2004, 14:43
| |||
| |||
| mapas enlaces Me gustaria que alguien me comunicase yo intento que al pasar el raton por un texto o foto el resultado de su ubicacion se refleje en un punto de un mapa para saber donde esta situado, es decir ejemplo ; paso con el raton por el nombre El Escorial y entonces en un plano de Madrid deberia de mostrarse con un punto rojo el lugar donde esta ubicado tienes la solucion ?
__________________ Saludos acaser www.turiscan.com |
|
07/03/2004, 17:21
| ||||
| ||||
| Hola acaser: Se puede hacer pero es algo trabajoso...  . Hace poco respondí este mensaje: http://www.forosdelweb.com/s6aa06d0c...msg185737.html, y como podrás ver, se trata de una imagen grande y otra imagen más pequeña, y creo que es la solución.La solución: según creo, necesitas ese mapa de Madrid y una imagen (o una capa con un punto... sea como sea) que se muestre u oculte según el evento del ratón... puedes crear una función (método) que posicione y muestre el punto, y otra que lo oculte... function mostrarPunto(x, y) { with (document.getElementById("punto").style) { left = x; top = y; visibility = "visible"; } } function ocultarPunto() { document.getElementById("punto").style.visibility = "hidden"; } Suponiendo que la imagen de madrid sea imagen.gif y el punto sea punto.gif... <div style="position: relative"> <img src=madrid.gif style="position: aboslute; left: 0; top: 0" /> <img src=punto.gif style="position: aboslute; left: 0; top: 0" /> <div> ... si Madrid tuviera las coordenadas (20, 20)... <p>Pongamos que hablo de <span onmouseover="mostrarPunto(20, 20)" onmouseout="ocultarPunto()"> Madrid</span></p> Lo puse "a capella", así que puede no ser correcto, pero espero que al menos te valga la idea. Saludos  Última edición por caricatos; 15/03/2004 a las 14:28 |
|
12/03/2004, 11:39
| |||
| |||
| podrias decirme Hola de nuevo veras al intentar pulsar en la direccion que me citas me lleva a una pagina digamos de menus cuando parece ser que tu me quieres enseñar algun ejemplo que creo que es lo que me ayudaria ¿ podrias verificar la direccion para verla ? y mandarmela de nuevo haber si asi me aclaro mejor ? Cita: Mensaje Original por caricatos Hola acaser: Se puede hacer pero es algo trabajoso... . Hace poco respondí este mensaje: http://www.forosdelweb.com/s6aa06d0c...sg185737.html, y como podrás ver, se trata de una imagen grande y otra imagen más pequeña, y creo que es la solución.La solución: según creo, necesitas ese mapa de Madrid y una imagen (o una capa con un punto... sea como sea) que se muestre u oculte según el evento del ratón... puedes crear una función (método) que posicione y muestre el punto, y otra que lo oculte... function mostrarPunto(x, y) { with (document.getElementById("punto").style) { left = x; top = y; visibility = "visible"; } } function ocultarPunto() { document.getElementById("punto").style.visibility = "hidden"; } Suponiendo que la imagen de madrid sea imagen.gif y el punto sea punto.gif... <div style="position: relative"> <img src=madrid.gif style="position: aboslute; left: 0; top: 0" /> <img src=punto.gif style="position: aboslute; left: 0; top: 0" /> <div> ... si Madrid tuviera las coordenadas (20, 20)... <p>Pongamos que hablo de <span onmouseover="mostrarPunto(20, 20)" onmouseout="ocultarPunto()"> Madrid</span></p> Lo puse "a capella", así que puede no ser correcto, pero espero que al menos te valga la idea. Saludos
__________________ Saludos acaser www.turiscan.com |
|
15/03/2004, 14:31
| ||||
| ||||
| Hola otra vez: Por poner una coma detrás de la dirección, se iba a otra parte. Ya lo arregle... de todos modos, repito la dirección: http://www.forosdelweb.com/s6aa06d0c...msg185737.html Tardé en contestar porque estuve varios días sin poder entrar en los foros. Saludos |
|
17/04/2004, 16:44
| ||||
| ||||
| A ver si este ejemplo te ayuda un poco: Código PHP: Para ver como funciona pincha aqui
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. Última edición por KarlanKas; 17/04/2004 a las 16:50 |
|
17/04/2004, 19:55
| |||
| |||
| Hace poco hice algo parecido, tenia una imagen con 12 personas, cuando pasabas el puntero del mouse por encima de una aparecia un layer con informacion de la misma. Lo que hice fue lo siguiente, cada objeto, o sea, imagen, ejecutaba el mismo script al pasar el mouse por encima (onMouseOver), hacian aparecer un layer, y al sacar el mouse lo escondia. Ahora, para que el layer aparezca justo donde esta la imagen, tenes que captar las coordenadas x/y del mouse. despues descontas la mitad de la medida de la imagen y lo dividis por 2: (objeto.ancho-lamitad)/2. Ese valor se lo restas a X y (objeto.altura-lamitad)/2 a Y. Y adentro del layer o los layers pones la imagen o las imagenes que queres que aparezcan cuando pasan el mouse por encima. En realidad, por mas que no parezca, esto es mas sencillo que mapear una imagen. Y es mucho mas practico. |
|
18/04/2004, 01:51
| ||||
| ||||
| Hola a todos: El ejemplo de KarlanKas  , es exactamente lo que planteaba  ...Lo único que quiero añadir, es que no es necesario darle al div contenedor del mapa posiciones absolutas... ... Dando una posición relativa a la capa exterior y absoluta a la capa interior se puede centrar la capa con un sencillo align=center... y las posiciones absolutas de la capa interior seguirán correspondiéndose aunque se redimensione la ventana.Saludos |
|
18/04/2004, 03:14
| ||||
| ||||
| No te preocupes Tuk, que no tengo el más mínimo interés en matarte. Así que puedes respirar tranquilo. caricatos, tienes razoón con lo de las capas... aunque no sabemos dónde quiere poner las capas el bueno de acaser Y ahora a todos. He estado pensando y hace tiempo, mucho tiempo, alguien dejó el ejemplo de un mapa de América del Sur con el nombre de todos los paises que al pasar el ratón por encima se iluminaba. Estaba hecho de la siguiente forma: Se ponía la imagen encima de una capa de un color llamativo. Cada Pais era de distinto color al resto, pero la variación era tan pequeña que ni se notaba, y lo que se hacía era que al pasar el ratón por encima de un pais se utilizaba un filtro para hacer ese color (el color de ese pais) transparente de forma que se viera el color de la capa de atrás de forma que pareciera que se iluminaba el pais. ¿Os acordais? Creo que JavierB hizo un ejemplo de eso con un mapa de España... Lo que se hacía para que que fuera transparente la capa era el filtro Chroma de IE. La forma de hacerlo supongo que sería: document.getElementById("mapa").filters(chroma).co lor="#ffffee33"; Las dos primeras letras son para fijar el nivel de transparencia del color que se hace transparente... Así que lo que se hace en el onmouseover es: <a hreh="#" onmouseover="iluminar('ffaa11')", onmouseout="ocultar('ffaa11')">Ayuntamiento</a> Y la función sería: function iluminar(esto){ eval('document.getElementById("mapa").filters(chro ma).color="#ff'+esto; } function apagar(esto){ eval('document.getElementById("mapa").filters(chro ma).color="#00'+esto; } Estoy n lo cierto? Es que no me apetece mucho ponerme a hacer ejemplos un domingo, si a alguno le apetece. Tal vez sea lo más aproximado a lo que pide acaser. Un saludo!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
18/04/2004, 11:29
| ||||
| ||||
| Cita: Me temo que te equivocas. No recuerdo haber hecho nada parecido, además es un tema del que tengo muy poco idea Mensaje Original por KarlanKas Creo que JavierB hizo un ejemplo de eso con un mapa de España...  Te deseo suerte acaser. Saludos, |
|
18/04/2004, 12:50
| ||||
| ||||
| Me cachis! Por una vez me han fallado mis antenas! Creo entonces que fue caricatos... Por cierto, de nada, acaser! Para eso estamos! Si quieres alguna explicación...
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
18/04/2004, 13:18
| |||
| |||
| ¿ que pesado soy verdad? Bueno graciqas por contestar y por todo ahora estoy intentando ponerlo a mi modo he intento poner mas nombres y poder indicar mas sitios en el plano pero no acabo de ver donde tengo que cambiar las lineas es decir tu me has puesto tres ejemplos como podria yo poner las demas coordenadas de los lugares que quiero indicar en el plano ? espero me entiendas
__________________ Saludos acaser www.turiscan.com |
|
18/04/2004, 14:30
| ||||
| ||||
| Es muy fácil. Fíjate que hay unos arrays que se llaman izquierda y arriba: izquierda=[150,100,340] arriba=[150,50,100] No son más que las coordenadas de los distintos sitios que quieres marcar. El primer par (150 y 150) corresponden al primer enlace que tiene el id como 0 (cero): <a href="#" id="0" onmouseout="ocultar()" onmouseover="mostrar(this.id)">Puerta del Sol</a><br><br> Es importante que el id de cada sitio sea un número y que vayan in crescendo. El segundo par de números: 100 y 50 (100 de izquierda y 50 de arriba) son las coordenadas del segundo de los enlaces, significando que el siguiente punto está a 100 pixels del borde izquierdo de la imagen y a 50 pixels desde el borde superior de la misma. Y así con todos. Si quisieras añadir alguno no tendrías más que poner en la lista de enlaces: <a href="#" id="3" onmouseout="ocultar()" onmouseover="mostrar(this.id)">Otro sitio</a><br><br> y en las dos listas añadir las coordenadas: izquierda=[150,100,340,134] arriba=[150,50,100,200] Y ya está! No sé si me habré explicado bien.
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. Última edición por KarlanKas; 18/04/2004 a las 14:31 |
|
18/04/2004, 15:36
| ||||
| ||||
| Hola a todos: Parafraseando a "Bart Simpson"... ... ¡Yo no he sido!Las antenas de KarlanKas (¡Hola !) tienen perturbaciones galácticas gaminedianas (o algo similar... )Hace algún tiempo hice una página para crear mapas de imágenes (y creo que la he propuesto antes) que supongo que podrá servirte para conocer las coordenadas que necesitas: http://www.pepemolina.com/mapas/index.html También tengo otra (más vieja): http://www.pepemolina.com/coordes/coordes.html (Me parece que esta última era para un tema donde estaba implicado KarlanKas... )Lo mismo... si necesitas más ayuda ... P.D: Perdona que no haya contestado un mp, pero no los contesto porque el buzón se llena enseguida... Saludetes |
|
18/04/2004, 16:31
| ||||
| ||||
| Pues... no sé... habrá sido Carlitos... estoy muy mal ultimamente...
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
18/04/2004, 16:39
| ||||
| ||||
| Lo encontré!! Sí, efectivamente era Carlitos! Aquí está el enlace: http://www.terra.es/personal8/litoszgz/ y el hilo que inició DanielRey: http://www.forosdelweb.com/showthrea...threadid=60392
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
30/04/2004, 08:30
| |||
| |||
| Hola Karlankas lo que me enviastes funciona correctamente , gracias podrias decirme como puedo ,sobre el mismo ejemplo que me enviastes que al pasar el raton por un nombre se ñale 2 o 3 o 4 etc puntos diferentes en el plano ? es decir imaginate que paso el raton por la palabra HOSPITALES y quiero que en el plano se ilumine 3 puntos diferentes otra manera podria ser que al pasar el raton por el nombre HOSPITALES se abra un submenu con los nombres de tres hospitales y al pasar el raton por cada uno de ellos se ilumine solo el que corresponda del submenu te mando abajo el codigo que me mandastes y que ya te he dicho funciona bien se trata de trabajar sobre este mismo <html> <head> <title>Untitled</title> <script> izquierda=[150,100,340] arriba=[150,50,100] function mostrar(esto){ esto=parseInt(esto); document.getElementById("punto").style.left=izquie rda[esto]+"px"; document.getElementById("punto").style.top=arriba[esto]+"px"; document.getElementById("punto").style.visibility= "visible"; } function ocultar(){ document.getElementById("punto").style.visibility= "hidden"; } </script> </head> <body> <div id="indice"> <a href="#" id="0" onmouseout="ocultar()" onmouseover="mostrar(this.id)">Puerta del Sol</a><br><br> <a href="#" id="1" onmouseout="ocultar()" onmouseover="mostrar(this.id)">Calle Preciados</a><br><br> <a href="#" id="2" onmouseout="ocultar()" onmouseover="mostrar(this.id)">Calle Alcalá</a><br><br> </div> <div style="position:absolute;top:120px;left:150px;" id="mapa"> <div id="punto" style="z- index:999;background:red;visibility:hidden;width:1 5px;height:15px;font:normal 1px/1px verdana;position:absolute;"></div> <img src="mapa.jpg" width="441" height="366" alt=""> </div> </body> </html> -------------------------------------------------------------------------------- Para ver como funciona pincha aqui
__________________ Saludos acaser www.turiscan.com |
|
30/04/2004, 13:17
| ||||
| ||||
| Hola acaser Y KarlanKas :Se me ocurre una forma de conseguir lo que pides... Tener todos los puntos ocultos y al pasar el ratón por hospitales ponerlos visibles. Fíjate en esta página de ejemplo: http://www.pepemolina.com/pruebas/prueba151.html El código es: Código PHP: |
|
01/05/2004, 10:53
| |||
| |||
| Bueno pues lo que me has mandado es lo que quiero pero tengo un problema mas despues de dar 1000 vueltas he intentar copiar lineas para poner mas nombres no lo consigo me explico en tu ejemplo has puesto como referencia " mostrarme " al pasar el raton se muestra 2 puntos ( tus caricaturas) yo intento ahora poner ademas de " mostrame " " hospitales " " mercados " etc he intentado copiar lineas poniendo diferentes coordenadas para hospitales 3 con sus coordenadas para mercados 4 con sus coordenadas y chico no hay manera por supuesto que a VAR EMOTION le pongo los correspondientes " yo3, yo4 etc no lo consigo sobre este codigo que me has dado podrias poner lo que corresponda para poner " hospitales " y que se active 3 puntos ? asi yo podria ver donde cometo el error
__________________ Saludos acaser www.turiscan.com |
|
01/05/2004, 12:18
| ||||
| ||||
| Hola otra vez: Subí la misma página con unas modificaciones que creo que pueden ayudarte... Te trataré de explicar el sentido del script. Tanto mostrar y ocultar hacen exactamentelo mismo, incluso sería fácil modificarlo para que solo fuese un script, pero no voy a liarte (cuando te funcione como pretendes, si te interesa te lo explico). El parámetro que reciben estas funciones es una cadena de texto con los atributos name de las imágenes que se quieren mostrar u ocultar... mostrar(hospitales), equivale a mostrar("h1,h2,h3")... Hasta aquí no creo que tengas problemas (de lo contrario avísame) Dentro de la función la primera línea convierte la cadena en un array de las subcadenas que están separadas por la coma: var datos = dato.split(",");// => datos = ["h1", "h2", "h3"] Siempre considerando que hospitales/datos sea "h1,h2,h3"... La siguiente línea es un bucle que recorre todas las imágenes cuyo name se corresponda con los datos pasados en el parámetro, y modifica su visibilidad. Tan solo añadí estas imágenes: <img name="h1" src='smile.gif' style="position: absolute; left: 175; top: 30; visibility: hidden" /> <img name="h2" src='smile.gif' style="position: absolute; left: 10; top: 150; visibility: hidden" /> <img name="h3" src='smile.gif' style="position: absolute; left: 55; top: 80; visibility: hidden" /> ...Fíjate en el atributo name... y ya de paso cambié el dibujo, porque pienso que lo que quieres quedaría bien si para los hospitales pones miniaturas de hospitales, y con las iglesias pones iglesitas ... y monumentitos... y oficinitas de turismito... etc. Bien, ya sabes que si no llegas a enterarte del todo, sigue preguntando que así se aprende. Saludos |
|
02/05/2004, 14:46
| ||||
| ||||
 ... ¡Estupendo!Pregunta cuanto quieras, pero en los foros (no suelo responder las preguntas en mensajes privados) Cuando tengas la página terminada me gustaría ver el resultado. Saludos |
|
17/05/2004, 11:15
| ||||
| ||||
| Ya sabía yo que tenía que ser un genio.... 
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
efesstivamente, lo envío para javascript y lo uno con el duplicado que yá hay en javascript del mismo tema 
