Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom galera, seguinte: Tenho uma pagina na qual tenhos 5 links de mapas.
Sendo cada link obtem uma imagem, onde carrega na propria pagina com JQuery.
O problema é como vou saber em qual mapa o usuário clicou? qual div está selecionada atualmente?
O prototipo é esse Link
O código daqueles links são:
<div id="container">
<div id="block1">
<img src="http://previsaonumerica.cptec.inpe.br/~rpnum/cache/ETA20.png" alt="ETA 20" style="margin-top:30px; width:450px; height:600px;"/>
</div>
<div id="block2">
<img src="http://www.guiageo-europa.com/mapas/mapa/europa-politico.gif" alt="Europa" style="margin-top:30px; width:450px; height:600px;"/>
</div>
<div id="block3">
<img src="http://www.suapesquisa.com/mapas/mp-asia.jpg" alt="Ásia" style="margin-top:30px; width:450px; height:600px;"/>
</div>
<div id="block4">
<img src="http://www.infoescola.com/wp-content/uploads/2009/08/oceania_map_UTexas.jpg" alt="Oceania" style="margin-top:30px; width:450px; height:600px;"/>
</div>
<div id="block5">
<img src="http://www.guiageografico.com/mapas/mapa/mapa-africa.gif" alt="África" style="margin-top:30px; width:450px; height:600px;"/>
</div>
</div>
----
<script type="text/javascript">
$(function(){
$("#for-block1")
.click(function(){
$("#block1").show();
$("#block2").hide();
$("#block3").hide();
$("#block4").hide();
$("#block5").hide();
});
$("#for-block2")
.click(function(){
$("#block2").show();
$("#block1").hide();
$("#block3").hide();
$("#block4").hide();
$("#block5").hide();
});
$("#for-block3")
.click(function(){
$("#block3").show();
$("#block1").hide();
$("#block2").hide();
$("#block4").hide();
$("#block5").hide();
});
$("#for-block4")
.click(function(){
$("#block4").show();
$("#block1").hide();
$("#block2").hide();
$("#block3").hide();
$("#block5").hide();
});
$("#for-block5")
.click(function(){
$("#block5").show();
$("#block1").hide();
$("#block2").hide();
$("#block3").hide();
$("#block4").hide();
});
});
</script>Carregando comentários...