ImageMaps und jQuery
Verfasst: 27. Jul 2015, 15:58
Hallo,
ich habe ein Geländeplan (JPG) mit Image-Maps versehen, um beim Rollover über bestimmte Bereiche eine Sprechblase an einer definierten Stelle innerhalb der Map-Area einzublenden. Dieses Ein- und Ausblenden steuere ich über jQuery mithilfe der Funktionen 'mouseenter' und 'mouseleave'. Das funktioniert soweit - das Problem ist nur, sobald ich mit dem Mauszeiger über das Sprechblasen-DIV fahre, fängt dieses an zu flackern. Ich kann mir schon ungefähr denken, woran das liegt – es wird durch das überrollen der Sprechblase wahrscheinlich immer wieder ein mouseenter-/mouseleave-Event ausgelöst. Nur wie löse ich das Problem?
Hier mein HTML-Code:
Und hier das jQuery-Script:
Könnt Ihr mir da auf die Sprünge helfen? Vielen Dank schonmal!
Gruß,
Michael
ich habe ein Geländeplan (JPG) mit Image-Maps versehen, um beim Rollover über bestimmte Bereiche eine Sprechblase an einer definierten Stelle innerhalb der Map-Area einzublenden. Dieses Ein- und Ausblenden steuere ich über jQuery mithilfe der Funktionen 'mouseenter' und 'mouseleave'. Das funktioniert soweit - das Problem ist nur, sobald ich mit dem Mauszeiger über das Sprechblasen-DIV fahre, fängt dieses an zu flackern. Ich kann mir schon ungefähr denken, woran das liegt – es wird durch das überrollen der Sprechblase wahrscheinlich immer wieder ein mouseenter-/mouseleave-Event ausgelöst. Nur wie löse ich das Problem?
Hier mein HTML-Code:
Code: Alles auswählen
<div class="sprechblase">
Test
</div>
<div class="area">
<img src="files/gelaendeplan.png" border="0" usemap="#areaplan">
<map name="areaplan">
<area shape="poly" coords="622,149,657,167,561,281,522,263" href="#" class="parkplatz">
<area shape="poly" coords="665,163,684,156,734,177,612,327,562,303,562,285" href="#" class="pferdeweide">
<area shape="poly" coords="588,317,562,344,624,375,630,365,611,331,603,323" href="#" class="pferdestall">
<area shape="poly" coords="540,294,513,325,529,332,556,301" href="#" class="blockheizkraftwerk">
<area shape="poly" coords="473,319,499,331,493,337,493,344,499,346,472,377,466,373,460,383,453,383,429,410,405,399,428,370,424,367,435,353,444,355" href="#" class="kita">
<area shape="poly" coords="460,389,475,383,490,398,519,411,502,417,494,442,439,411" href="#" class="saal">
<area shape="poly" coords="467,428,459,438,459,443,480,452,487,444,487,439" href="#" class="wintergarten">
[ ... ]
</map>
</div>Code: Alles auswählen
$('area').mouseenter(function() {
$('.sprechblase').css('display','block');
// ich nutze die CSS-Klassen der Areas auch für die
// Sprechblasen-DIVs, um dessen Position zu definieren:
sb_prev_class = sb_class;
sb_class = $(this).attr('class');
$('.sprechblase').removeClass(sb_prev_class).addClass(sb_class);
}).mouseleave(function() {
$('.sprechblase').css('display','none');
}); Gruß,
Michael
