mouseover

[maforast]

Salve a tutti, vorrei fare una funzioncina jquery che permette, data una mappa, mostrare il nome della città su cui passa sopra il mouse

diciamo che ho italia->campania->nome provincia su cui passa il mouse.

Prememto che ho dei tag map e area su cui sono prenseti i vari attributi title e alt

Ho fatto una cose di questo tipo ma non va molto bene...

jQuery("div.reg").mouseover(function() {
var nam=jQuery('div#div_province > map > area').attr('alt');
$(this).find("span").append(nam);
}).mouseout(function(){
$(this).find("span").remove();
});

In questo modo mi esce solo la prima provincia e me l'aggiunge sempre...

Qualcuno sa aiutarmi?

[maforast]

salve ragazzi ho modificato cosi:

jQuery('div.reg').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
jQuery(this).find("span").append(jQuery('div#div_p rovince > map > area').attr('alt'));
} else {
jQuery(this).find("span").remove();
}

Ma me lo fa sempre una sola volta perchè non mi cambia l'attributo alt a seconda di dove sto con il mouse? vorrei avere questa chiamata sempre aggiornata ad ogni movimento del mouse
jQuery('div#div_province > map > area').attr('alt'));

[Vindav]

posta anche la porzione di codice html interessato...

[maforast]

eccolo

<div style="float:left">

<div id="4" class="reg" ><button>Italia</button>- Campania <span> </span>
<div id="div_province" >[img]images/campania.gif[/img]
  <map name="camp" id="camp">
    <area id="Salerno" title="Salerno" shape="poly" coords="196,236,189,226,175,225,164,212,170,202,170,186,150,150,140,142,130,131,112,144,109,126,123,122,144,130,161,130,190,139,199,116,208,115,212,131,223,136,240,177,253,187,254,196,264,198,262,203,270,210,260,214,262,222,256,230,252,238,233,236,221,252,212,251,208,238"  href="javascript:void(0)"  onClick="riempiCampoProv();" alt="Salerno" optionval1="16" />
    <area id="Avellino" title="Avellino" shape="poly" coords="137,18,145,12,153,12,157,-2,174,7,165,22,176,34,175,46,167,40,158,40,151,46,152,54,159,66,155,76,139,81,128,85,109,87,102,88,91,77,96,77,96,68,95,46,98,32,109,25,120,14"  href="javascript:void(0)" onClick="riempiCampoProv();"  alt="Avellino" optionval1="13" />
    <area id="Caserta" title="Caserta" shape="poly" coords="19,6,12,14,16,34,0,49,22,78,21,85,32,97,42,97,49,102,72,88,99,92,87,77,94,74,92,53,96,29,87,15,70,11,45,14,45,25,38,31,20,11"  href="javascript:void(0)" onClick="riempiCampoProv();" alt="Caserta" optionval1="14"/>
    <area id="Benevento" title="Benevento" shape="poly" coords="158,43,176,48,179,34,194,37,191,57,199,69,213,71,220,57,234,64,232,89,221,91,215,98,209,113,199,110,188,135,165,127,141,126,125,120,115,123,113,111,102,90,127,87,156,77,160,66,153,53"  href="javascript:void(0)"  onClick="riempiCampoProv();" alt="Benevento" optionval1="12"/>
    <area id="Napoli" title="Napoli" shape="poly" coords="108,121,109,140,86,152,96,137,94,128,76,120,63,109,47,117,39,116,32,98,52,104,69,93,100,94,112,113"  href="javascript:void(0)"  onClick="riempiCampoProv();" alt="Napoli" optionval1="15"/>
  </map>
</div>
</div>

[Vindav]

$('area').live('mouseover', function() {
	$("#mySpan").html($(this).attr('alt'));
});

$('area').live('mouseout', function() {
	$("#mySpan").html("");
});

<div id="4" class="reg" ><button>Italia</button>- Campania <span id="mySpan"> </span>
<div id="div_province" >[img]images/campania.gif[/img]
  <map name="camp" id="camp">
    <area id="Salerno" title="Salerno" shape="poly" coords="196,236,189,226,175,225,164,212,170,202,170,186,150,150,140,142,130,131,112,144,109,126,123,122,144,130,161,130,190,139,199,116,208,115,212,131,223,136,240,177,253,187,254,196,264,198,262,203,270,210,260,214,262,222,256,230,252,238,233,236,221,252,212,251,208,238"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Salerno" optionval1="16" />
    <area id="Avellino" title="Avellino" shape="poly" coords="137,18,145,12,153,12,157,-2,174,7,165,22,176,34,175,46,167,40,158,40,151,46,152,54,159,66,155,76,139,81,128,85,109,87,102,88,91,77,96,77,96,68,95,46,98,32,109,25,120,14"  href="java-script:void(0)" onClick="riempiCampoProv();"  alt="Avellino" optionval1="13" />
    <area id="Caserta" title="Caserta" shape="poly" coords="19,6,12,14,16,34,0,49,22,78,21,85,32,97,42,97,49,102,72,88,99,92,87,77,94,74,92,53,96,29,87,15,70,11,45,14,45,25,38,31,20,11"  href="java-script:void(0)" onClick="riempiCampoProv();" alt="Caserta" optionval1="14"/>
    <area id="Benevento" title="Benevento" shape="poly" coords="158,43,176,48,179,34,194,37,191,57,199,69,213,71,220,57,234,64,232,89,221,91,215,98,209,113,199,110,188,135,165,127,141,126,125,120,115,123,113,111,102,90,127,87,156,77,160,66,153,53"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Benevento" optionval1="12"/>
    <area id="Napoli" title="Napoli" shape="poly" coords="108,121,109,140,86,152,96,137,94,128,76,120,63,109,47,117,39,116,32,98,52,104,69,93,100,94,112,113"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Napoli" optionval1="15"/>
  </map>
</div>
</div>

[maforast]

Originariamente inviato da Vindav

$('area').live('mouseover', function() {
	$("#mySpan").html($(this).attr('alt'));
});

$('area').live('mouseout', function() {
	$("#mySpan").html("");
});

<div id="4" class="reg" ><button>Italia</button>- Campania <span id="mySpan"> </span>
<div id="div_province" >[img]images/campania.gif[/img]
  <map name="camp" id="camp">
    <area id="Salerno" title="Salerno" shape="poly" coords="196,236,189,226,175,225,164,212,170,202,170,186,150,150,140,142,130,131,112,144,109,126,123,122,144,130,161,130,190,139,199,116,208,115,212,131,223,136,240,177,253,187,254,196,264,198,262,203,270,210,260,214,262,222,256,230,252,238,233,236,221,252,212,251,208,238"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Salerno" optionval1="16" />
    <area id="Avellino" title="Avellino" shape="poly" coords="137,18,145,12,153,12,157,-2,174,7,165,22,176,34,175,46,167,40,158,40,151,46,152,54,159,66,155,76,139,81,128,85,109,87,102,88,91,77,96,77,96,68,95,46,98,32,109,25,120,14"  href="java-script:void(0)" onClick="riempiCampoProv();"  alt="Avellino" optionval1="13" />
    <area id="Caserta" title="Caserta" shape="poly" coords="19,6,12,14,16,34,0,49,22,78,21,85,32,97,42,97,49,102,72,88,99,92,87,77,94,74,92,53,96,29,87,15,70,11,45,14,45,25,38,31,20,11"  href="java-script:void(0)" onClick="riempiCampoProv();" alt="Caserta" optionval1="14"/>
    <area id="Benevento" title="Benevento" shape="poly" coords="158,43,176,48,179,34,194,37,191,57,199,69,213,71,220,57,234,64,232,89,221,91,215,98,209,113,199,110,188,135,165,127,141,126,125,120,115,123,113,111,102,90,127,87,156,77,160,66,153,53"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Benevento" optionval1="12"/>
    <area id="Napoli" title="Napoli" shape="poly" coords="108,121,109,140,86,152,96,137,94,128,76,120,63,109,47,117,39,116,32,98,52,104,69,93,100,94,112,113"  href="java-script:void(0)"  onClick="riempiCampoProv();" alt="Napoli" optionval1="15"/>
  </map>
</div>
</div>

Grande funziona mi ero avvicinato.
l'ho esteso anche per le sottomappe delle province. L'unico problema adesso è che quando torno alla mappa principale non me lo fa piu è come se non vedesse l'evento onmouseover

[Vindav]

l'ho esteso anche per le sottomappe delle province. L'unico problema adesso è che quando torno alla mappa principale non me lo fa piu è come se non vedesse l'evento onmouseover

Per prima cosa bisognerebbe capire cosa intendi con "quando torno alla mappa principale", il div contenitore viene nascosto? Inoltre mi sembra impossibile che non venga piu intercettato l'evento onmouseover.

[maforast]

Originariamente inviato da Vindav
Per prima cosa bisognerebbe capire cosa intendi con "quando torno alla mappa principale", il div contenitore viene nascosto? Inoltre mi sembra impossibile che non venga piu intercettato l'evento onmouseover.

Allora scusa hai ragione non mi sono spiegato bene, io ho due eventi fade in e fade out che nascondono i div a seconda che uno clicchi sul pulsante ritorna alla mappa italia o clicchi su una regione della mappa italia.

Se clicco su una regione, viene nascosto il div della mappa italia e viene mostrato quello della regione. Adesso, se clicco nuovamento sul pulsante torna alla mappa italia l'evento onmouse over non viene più intercettato. Magari ti posto il codice cosi vedi meglio.

[Vindav]

si posta il codice...

[maforast]

Originariamente inviato da Vindav

si posta il codice...

eccolo

 
jQuery(document).ready(function(){
var $bigMap=jQuery('#div_regioni'); //seleziono le regioni
jQuery('div#div_regioni > map > area').click(function(){ //se clicco su una regione mostro la mappa equivalente al posto dell'italia
var regionId=jQuery(this).attr('optionVal');
$bigMap.fadeOut(0, function(){
jQuery('div#'+regionId).fadeIn(500);

// qui compare il testo Italia che se ci clicco mi fa ricomparire la mappa dell'italia e nasconde quella della regione, è a questo punto che il mouse over non funge piu

jQuery('div#searchPath > a').click(function(){//button
jQuery('.reg').hide();
jQuery('div#searchPath > span#regID').replaceWith('<span id="regID"></span>');
jQuery('span#provID').replaceWith('<span id="provID"></span>');
$bigMap.fadeIn(1000);
});


jQuery('div#div_regioni > map > area').live('mouseover', function() {
jQuery(".regID").html(" - "+jQuery(this).attr('alt'));
});
jQuery('div#div_regioni > map > area').live('mouseout', function() {
jQuery(".regID").html("");
});

jQuery('#div_province > map > area').live('mouseover', function() {
jQuery(".provID").html(" - "+jQuery(this).attr('alt'));
});

jQuery('#div_province > map > area').live('mouseout', function() {
jQuery(".provID").html("");
});