¿Cómo hacer un mapa de departamentos en HTML?

  • Autor Autor RemPro
  • Fecha de inicio Fecha de inicio
R

RemPro

Hola Betas! 😀
Necesito una ayudita!, necesito hacer un Mapa como el de esta página: Correo Uruguayo (me refiero al mapa donde están los departamentos).

La idea es hacerlo en HTML para no cargar muchos Script en el sitio, pero si lo saben hacer con otro lenguaje.. bienvenido sea 😀

Gracias por leerme!
 
Ya habia hecho algo parecido.. solo que esta en mi notebook (ojala aun esté jaja) y lastimosamente no lo traje al trabajo.. pero con el mapa de paraguay
 
no lo hice nunca pero ya te voy a averiguar
 
Hay muchas formas, formas fáciles:

1.- Con sprites, pero será un poco complicado lo de las coordenadas.

2.- En flash, necesitas el mapa con división política, lo insertas como fondo, después cortas cada estado(provincia, departamento o como le digan en tu país) en photoshop y los guardas como imagenes separadas, en flash cada estado lo insertas como botón encima del mapa de fondo. Tendrás hasta el efecto que cuando pasas el cursor se sobrepone.
 
[MENTION=48103]RemPro[/MENTION]

Esto se puede hacer con unas etiquetas de HTML, que se llaman image maps, las cuales son:

<img/> -> aqui va la imagen del mapa de uruguay.
<map>
<area/> Esta es la area que marca para artigas en la imagen de Uruguay y su enlace
<area/> Esta es la area que marca para salto en la imagen de Uruguay y su enlace
etc
etc.
</map>


Ejemplo: Copialo y pegalo en algun archivo HTML. (Algo parecido con el mapa de uruguay)

HTML:
<img id="Image-Maps-Com-image-maps" src="http://www.correo.com.uy/images/Mapa_del_Uruguay.jpg" border="0" width="391" height="423" usemap="#image-maps" alt="" />
<map name="image-maps" id="ImageMapsCom-image-maps">
<area  shape="rect" coords="51,11,169,79" alt="Artigas" title="Artigas" target="_self" href="https://www.google.com/#q=Artigas"     />
<area  shape="rect" coords="42,76,160,144" alt="Salto" title="Salto" target="_self" href="https://www.google.com/#q=Salto"     />
<area  shape="rect" coords="31,143,149,196" alt="Paysandu" title="Paysandu" target="_self" href="https://www.google.com/#q=Paysandu"     />
<area  shape="rect" coords="19,198,128,251" alt="Rio Negro" title="Rio Negro" target="_self" href="https://www.google.com/#q=Rio Negro"     />
<area  shape="rect" coords="128,208,237,278" alt="Durazno" title="Durazno" target="_self" href="https://www.google.com/#q=Durazno"     />
<area  shape="rect" coords="3,249,90,319" alt="Soriano" title="Soriano" target="_self" href="https://www.google.com/#q=Soriano"     />
<area  shape="rect" coords="88,257,144,322" alt="Flores" title="Flores" target="_self" href="https://www.google.com/#q=Flores"     />
<area  shape="rect" coords="143,276,213,348" alt="Florida" title="Florida" target="_self" href="https://www.google.com/#q=Florida"     />
<area  shape="rect" coords="232,229,358,275" alt="Treinta y 3" title="Treinta y 3" target="_self" href="https://www.google.com/#q=33"     />
<area  shape="rect" coords="284,267,358,379" alt="Rocha" title="Rocha" target="_self" href="https://www.google.com/#q=Rocha"     />
<area  shape="rect" coords="208,274,284,362" alt="Lavalleja" title="Lavalleja" target="_self" href="https://www.google.com/#q=Lavalleja"     />
<area  shape="rect" coords="14,322,104,364" alt="Colonia" title="Colonia" target="_self" href="https://www.google.com/#q=Coloni"     />
<area  shape="rect" coords="106,325,147,386" alt="San José" title="San José" target="_self" href="https://www.google.com/#q=San José"     />
<area  shape="rect" coords="150,349,217,395" alt="Canelones" title="Canelones" target="_self" href="https://www.google.com/#q=Canelones"     />
<area  shape="rect" coords="219,364,292,406" alt="Maldonado" title="Maldonado" target="_self" href="https://www.google.com/#q=Maldonado"     />
<area shape="rect" coords="389,421,391,423" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area  shape="poly" coords="174,105,204,64,275,165" alt="Rivera" title="Rivera" target="_self" href="https://www.google.com/#q=Rivera"     />
<area  shape="poly" coords="283,128,268,174,177,109" alt="Rivera" title="Rivera" target="_self" href="https://www.google.com/#q=Rivera"     />
<area  shape="poly" coords="210,65,285,127,206,145" alt="Rivera" title="Rivera" target="_self" href="https://www.google.com/#q=Rivera"     />
<area  shape="poly" coords="138,218,271,176,164,100" alt="Tacuarembó" title="Tacuarembó" target="_self" href="https://www.google.com/#q=Tacuarembó"     />
<area  shape="poly" coords="371,225,286,136,246,242,297,214" alt="Cerro Largo" title="Cerro Largo" target="_self" href="https://www.google.com/#q=Cerro Largo"     />
<area  shape="poly" coords="9,328,12,415,286,420,108,385" alt="Monte Video" title="Monte Video" target="_self" href="https://www.google.com/#q=Monte Video"     />
</map>


Para facilitarte todo este codigo, puedes utilizar esta pagina Online.

https://www.image-maps.com/

1. Subes la imagen.
2. Siguiente
3. Click Derecho, sobre la imagen y selecionar el tipo de selecion, rectangulo, circulo, o triangulo (recomendado para hacer topes perfectos)
4. Repetis los pasos hasta llenar los espacios
5. Tecleas el enlace, title y alt.
6. Click derecho, Get Code y te da el codigo, como el que puse de ejemplo arriba.
7. Copias el codigo y cambias su imagen por la tuya o la de tu servidor, ya que la imagen en image-maps se borra en 24 horas. :ambivalence:

8. Listo ya tienes tu imagen mapeada. 😛8:
 
Última edición:
amigo descarga el curso de video2brain el de html,hay una parte que te explican bien esto, como sacar las coordenadas y eso, mira una imagen de ejemplo...
v2b.jpg
 
Gracias a todos!!, entre todas las respuestas ya estoy armando el mapa de imágenes!.
Infinitas gracias!!!!
 
Mapeo de imagenes, Dreamweaver tiene la herramienta incorporada, es exactamente lo que buscas.
 
Como comenta jazhiel y otros compañeros, con Dreamweaver tienes la herramienta perfecta para hacerlo.
Una vez hayas insertado tu imagen en Dreamweaver, selecciónala para ver el siguiente menú en la parte inferior:
mapeo imagen.webp
Con las herramientas de la parte inferior izquierda puedes delimitar las zonas en forma de rectangulo, circulo o forma libre. Esta última te viene de perlas para definir los límites de cada región. En cuanto los tengas definidos, puedes asignarles vínculos seleccionándolos, uno a uno, con el cursor negro.

Un saludo.
 
Atrás
Arriba