Criar página HTML com um mapa interativo e links para três países

  • Autor Autor Charlie Harper
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
C

Charlie Harper

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola, necesito crear una página HTML con un mapamundi en el que 3 países tengan enlaces a otras páginas. Algo como esto pero en HTML: Constructora Valencia | Promotora Valencia | Urbecop

No sé ni por donde empezar, ¿alguien me dico cómo lo puedo hacer? Gracias
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
con map puedes hacerlo en html puro
HTML map tag

pero es mas estático, no saldrán los paises parpadeando como el ejemplo
 
con javascript se deberia poder hacer, prueba a ponerle un id a la imagen, y luego en cada area algo asi
onmouseover="document.getElementById['idImage'].src='mapaEspanaEncendido.jpg';" onmouseout="document.getElementById['idImage'].src='mapaApagado.jpg';"

donde idImage es el id que le has puesto y los jpg las url de las imagenes, no estoy seguro que funcione 😕
 
Bueno no es tan complicado, antes que nada busca un buen mapa con la división geográfica mundial.

Una forma puede ser con flash, insertas el mapa y creas los botones con la geografía de los países que serán interactivos (los países que serán botón también los insertas en flash como archivos separados y los sobrepones al mapa completo).

Otra como dice linuxer con html. Entra a este sitio maschek.hu - Online Image Map Editor subes tu mapa y marcas el contorno de cada país para que tome las coordenadas, después las copias y pegas en tu html, y con css le das el efecto hover, osea que cambie de color, resalte, etc cuando pasa el cursor, y que te abra otra web.

Un ejemplo de como va el código html con la etiqueta <area shape> es algo así:

Inserir CODE, HTML ou PHP:
<area shape="poly" coords="6,8,33,7,43,7,37,15,40,22,39,32,40,45,42,61,45,68,51,74,56,81,58,86,63,94,69,101,73,108,63,110,52,106,52,101,47,91,39,80,32,72,22,66,22,60,21,51,16,48,16,38,12,32,7,21,8,14,3,12" href="#">

Hay tres formas de areas, rectangulo, círculo y poly, que es la que no tiene una forma definida y es el que se usa para tu caso. En coords son las coordenadas que te da la aplicación que te comento arriba.

Revisa el link que puso linuxer para que te des una mejor idea.
 
Última edição:
Gracias por la ayuda, pero con el tema del hover y el css me pierdo, ¿alguien se ofrece para hacérmelo (cobrando, claro)?
 
La cosa es que no puedes hacer negocios todavía.

Te ayudo "gratuitamente".

Dame la info.
 
Voltar
Topo