Como fazer um mapa interativo em jQuery

Escrito por jim campbell | Traduzido por sophia coe
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um mapa interativo em jQuery
Faça um mapa interativo usando jQuery (Jupiterimages/Comstock/Getty Images)

Um mapa interativo é uma imagem que pode ser inserida em uma página na Web e dividida em seções, cada uma delas representando um link clicável para uma URL especificada. Você pode usar CSS para dividir a imagem e depois usar o jQuery para criar funções clicáveis que desencadearão ao clicar em uma parte da imagem. Você poderá usar qualquer imagem como mapa interativo e vincular as partes da imagem para uma função jQuery.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Clique com o botão direito no arquivo HTML que deseja usar para criar o mapa. Clique em "Open With" (Abrir com) e selecione seu editor preferido.

  2. 2

    Insira a imagem que deseja usar. O código seguinte adicionará uma imagem ao seu documento HTML:

    <img src="myimage.jpg" id="map" />

    Substitua "myimage.jpg" pelo nome do seu arquivo de imagem.

  3. 3

    Configure a seção CSS fora da imagem dentro dos seguimentos clicáveis. O código seguinte dividirá a imagem em duas partes distintas:

    panel1b {left: 0; width: 95px;}

    panel2b {left: 96px; width: 75px;}

  4. 4

    Adicione a função jQuery que será ativada quando um usuário clicar em uma das seções. Esse código navegará pela página da Web associada à seção:

    $('#map').click(function() { if ("#panel2b") { browser.navigate = "page1.php"; } else { browser.navigate = "page2.php"; } });

    Troque os nomes de arquivos pelos seus.

  5. 5

    Adicione um script jQuery à suas tags de título. Copie e cole o código seguinte à seção de título do seu código:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível