Cómo hacer un mapa interactivo en jQuery

Escrito por jim campbell | Traducido por juliana star
Cómo hacer un mapa interactivo en jQuery

Entérate de cómo hacer un mapa interactivo en jQuery.

Ryan McVay/Photodisc/Getty Images

Un mapa interactivo es una imagen que puede insertarse en una página web y dividirse en secciones, cada una representando un vínculo hacia una URL especificada en el cual puedes hacer clic. Puedes usar CSS para dividir la imagen y luego jQuery para crear las funciones que se activan cuando haces clic en una sección de la imagen. Puedes usar cualquier imagen como mapa interactivo y vincular sus secciones a una función de jQuery.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic con el botón derecho en el archivo HTML que quieras usar para crear el mapa. Haz clic en "Abrir con" y selecciona tu editor preferido.

  2. 2

    Inserta la imagen que quieras usar. El siguiente código agrega una imagen a tu documento HTML: <img src="myimage.jpg" id="map" /> Sustituye "myimage.jpg" con el nombre de archivo de tu propia imagen.

  3. 3

    Configura el CSS para dividir la imagen en los segmentos para hacer clic. El siguiente código divide la imagen en dos secciones distintas: #panel1b {left: 0; width: 95px;} #panel2b {left: 96px; width: 75px;}

  4. 4

    Añade la función jQuery que se activa cuando un usuario hace clic en una de las secciones. Este código navega a la página web asociada con la sección: $('#map').click(function() { if ("#panel2b") { browser.navigate = "page1.php"; } else { browser.navigate = "page2.php"; } }); Sustituye los nombres de archivos de las páginas web con los tuyos.

  5. 5

    Añade los archivos script de jQuery a las etiquetas de tu encabezado. Copia y pega el siguiente código en la sección del encabezado de tu código: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media