Mapa de España HTML/CSS [Ideas]

eXtreM3

Hola!! Vereis... tengo que hacer una web, en cuya página principal aparece un mapa de España. El funcionamiento es muy parecido o idéntico al de esta web:

http://www.segundamano.es/

Lo típico, al poner el ratón encima de cada provincia se ilumina y te devuelve el valor de la base de datos. El lenguaje a usar sería php Por ejemplo en esa web devuelve

clasificados-ciudad/?ca=ID_CIUDAD_s

Bien, la primera duda que me asalta es cómo maquetar el mapa en sí. Cómo debería hacerlo? A mí se me ha ocurrido que (partiendo de la base de que no tengo ni idea de flash) podría poner una capa con el mapa entero de España sin más, y luego ir poniéndole divs con cada una de las ciudades por separado, y ya cada ciudad actúa por su cuenta. Esta sería la solución facil, difícil de elaborar porque habría que ir colocando cada div con su position:absolute y sería un auténtico coñazo ir moviendo cada capa a su sitio correcto. Y ya pues en cada capa ponerle su vínculo, una vez maquetado sería realmente sencillo crear el funcionamiento.

Se os ocurre alguna manera de hacerlo en html / css que sea más sencillo??

PD: dispongo del mapa entero y todas las ciudades por separado.

GRACIASSSSSSSS!!

Crawler

pues en el propio código de segundamano.es puedes ver como lo hacen ellos:

<map id="spain_map" name="spain_map">
<area coords="198,36,197,43,193,47,192,52,186,52,183,48,180,47,173,41,173,39,170,38,170,35,177,35,173,28,177,25,179,31,187,33,198,36" href="http://www.segundamano.es/clasificados-alava/?ca=1_s" title="Álava/Araba" alt="Álava/Araba" shape="poly" onmouseout="hide_image(1);" onmouseover="change_image(1);"/>
.
.
.
<area coords="168,320,167,315,172,312,174,320,168,320" title="Melilla" href="http://www.segundamano.es/clasificados-melilla/?ca=52_s" alt="Melilla" shape="poly" onmouseout="hide_image(52);" onmouseover="change_image(52);"/>
</map>

JuAn4k4

Eso el dreamweaver lo hacía de forma gráfica.

NeB1

que eso eso de <area....?

Fyn4r

#4 Lo que esta haciendo #2 es un mapa de imagen, es decir una imagen en la que creas unas secciones con las que puedes trabajar (poner links a otras webs, etc). Mira aqui.

La idea del <area> es definir las coordenadas de cada seccion y que se va a hacer en cada una de ellas, en este caso, las provincias españolas.

Si, me explico como el culo pero con el link de arriba deberias verlo facil xD

NeB1

#5 ahora mismo lo estaba mirando, que maravilla!! esto es html 5 o algo? donde está el truco?

Crawler

no hay truco, lleva desde que yo hice mi primer intento de web, con el frontpage, allá por el 99 :P

Funciona con todos los DTD de html 4, (asumo que tambien con html5), para lo poco que lo he usado es crossbrowser 100%, y de la manera que lo tienen implementado en "segundamano" es totalmente accesible (además de los map/area, hay un listado equivalente de enlaces tipo texto)

Ahora, tampoco se que utilidad darle :P

2 años después
xa3ro

Buenas tardes

Vereis os cuento un poquito. Yo necesitaria un mapa interactivo de andalucia con sus respectivas ciudades. La idea es, por ejemplo, al pinchar en cordoba que haga un zoom y salga el mapa de cordoba ampliado, aqui necesitaría 2 o 3 puntos nada mas los cuales al dejar el raton encima me salga me un cuadradito con 1 foto del sitio concreto y ya si clickeo me mande a una direccion web que yo le ponga. Sería algo este estilo:

http://www.ammap.com/

Es para hacer una presentación de los trabajos que yo hago mediante automatización, como es obvio yo solo configuro los automatas no haga las paginas web xDD solo sería para mostrar el producto ya acabado.

Me podrias explicar o ayudar a hacer uno? es que no tengo ni puta idea del mundo de la creación de paginas web pero en este caso lo necesito para encontrar trabajo :(

Gracias y espero que me haya explicado bien.

1 respuesta
eXtreM3

#8 hola ^^ En primer lugar necesitas los mapas, tanto el de Andalucia como el de las ciudades ampliadas. Después, con ayuda de dreamweaver, mapeas la imagen de Andalucia y le pones una acción al click (id) del área, que en tu caso será mostrar la capa con la ciudad seleccionada.

La segunda parte la haces fácil con jQuery, mostrando lo que quieras (la imagen de tu proyecto) al dejar el raton encima (hover o onmousein) de los puntitos.

1 respuesta
xa3ro

#9 de dreamweaver ( y cualquier cosa relacionada ) solo conozco el nombre xD

1 respuesta
Tunnecino

#10 Es que dreamweaver tiene un editor de maps super bueno, por que es gráfico, si no:

http://www.w3schools.com/tags/tag_map.asp

Usuarios habituales

  • Tunnecino
  • xa3ro
  • eXtreM3
  • Crawler
  • NeB1
  • Fyn4r
  • JuAn4k4