Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

betodesign

Mapa com efeito rollover

Por , em Javascript

Recommended Posts

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Opa... Não olhei a fundo, mas não parece ter na documentação o efeito que o betodesign quer...

Pelo que entendi seria:

1. Mouseover na area do mapa

2. O link muda de cor (ou qualquer outra diferenciação de estilo).


Bom, olhando rapidamente e, se realmente não tiver na documentação (repito: não olhei a fundo), o jeito seria implementar essa funcionalidade utilizando evento de mouseover no map area.

Você define manualmente tanto as tags <area> quanto a ul>li, não é?

Se for assim, adiciona um data-ALGUMACOISA nos <area>, captura o evento de mouseover/enter, e, utilizando o data-... faz o efeito desejado na li. Ex.

<area shape="poly" coords="..." href="javascript:;" alt="" data-link="armacao-dos-busios">

<ul style="margin-top:0px;">
  <li class="armacao-dos-buzios"><a id="hilightlink" href="http://www.guiaforte.com.br/buzios">Armação dos Búzios</a></li>
  ....
</ul>

E no JS faria algo como

$("map area").hover(function() {
  var classe = '.' + $(this).data('link');
  $(classe).addClass('active')
},
function() {
  var classe = '.' + $(this).data('link');
  $(classe).removeClass('active')
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado

bom vamos lá.

eu coloco isso 'class="macae" data-maphilight='{"groupBy":".macae"}'

as '<Area' seleciona na boa, mas o link dentro da <li> nao aceita este comando, eu preciso apenas que apareça um bgcolor atras da li pra mostrar que a area se refere a este nome entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

betodesign    0

betodesign
Postado 
<head>
	<meta charset="utf-8">
	<title>jQuery maphilight documentation</title>
    <script>
	$("map area").hover(function() {
  var classe = '.' + $(this).data('link');
  $(classe).addClass('active')
},
function() {
  var classe = '.' + $(this).data('link');
  $(classe).removeClass('active')
});
	</script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>
	<script type="text/javascript">$(function() {
		$('.map').maphilight();
	});</script>
     
        
</head>



<body bgcolor="#ffffff">

<img name="mapario" class="map" src="mapa-rio.png" width="654" height="479" id="usa" usemap="#usa"alt="" /><map name="usa">
  <area shape="poly" coords="527,271,523,268,523,264,514,252,504,245,504,248,504,253,501,255,500,259,499,265,497,268,493,268,492,261,489,260,489,257,489,254,489,249,486,247,483,248,480,246,476,244,472,243,466,248,459,249,457,253,458,256,453,258,447,259,441,264,438,267,437,272,434,276,435,280,439,283,439,285,440,289,440,295,445,296,453,295,456,294,457,297,460,297,465,295,468,289,475,290,478,290,482,286,483,283,485,283,485,289,490,291,494,293,496,293,502,293,506,293,510,290,513,289,514,285,521,278,524,275,527,271,527,271" href="#" alt="" class="macae"  data-link="macae" />
</map>
<ul style="margin-top:0px;">
              
  <li class="macae"><a id="macae" href="http://www.guiaforte.com.br/macae" class="macae">Macaé</a></li>
                 
</ul>
                
</body>
</html>

fiz assim mas nao funcionou

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Coloque o 

$("map area").hover(...);

Dentro do DOMReady do jQuery.

$(function() {
    $("map area").hover(...); // <- AQUI
    $('.map').maphilight();
});

Da forma que está, sendo chamado no <head> e fora do DOMReady, não funcionará mesmo, pois os elementos ainda não estão prontos.


JSFiddle: http://jsfiddle.net/bn7st7xm/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Oi beto!

Isso tem na doc mesmo. Dá uma lida lá, mas é basicamente o que foi feito pra acender o link quando passar o mouse no mapa, só que ao contrário.


http://davidlynch.org/projects/maphilight/docs/demo_simple.html

$('#squidheadlink').mouseover(function(e) {
    $('#squidhead').mouseover();
}).mouseout(function(e) {
    $('#squidhead').mouseout();
}).click(function(e) { e.preventDefault(); });

Como tem muitos municípios e muitos links, defina um id com sufixo comum entre <a> e <area> e um sufixo que os diferencie. Por exemplo:

<area id="area-cidade1" ... />
<area id="area-cidade2" ... />

<a id="link-cidade1" ... />
<a id="link-cidade2" ... />

Entao, seu JS ficaria

$('ul.municipios li a').mouseover(function(e) {
    var id = "#area-" + $(this).attr('id').substr(5);
    $(id).mouseover();
}).mouseout(function(e) {
    var id = "#area-" + $(this).attr('id').substr(5);
    $(id).mouseout();
}).click(function(e) { e.preventDefault(); });

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito