[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
ImageMaps und jQuery - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
derkrebs
Beiträge: 149
Registriert: 4. Okt 2011, 17:27

ImageMaps und jQuery

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:

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>
Und hier das jQuery-Script:

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');

}); 
Könnt Ihr mir da auf die Sprünge helfen? Vielen Dank schonmal!

Gruß,
Michael

Benutzeravatar
runstop64
Beiträge: 369
Registriert: 23. Okt 2012, 21:34
Wohnort: Hamburg
Kontaktdaten: Website Facebook Twitter

Re: ImageMaps und jQuery

27. Jul 2015, 16:19

Die Map muss wahrscheinlich über dem Div für die Sprechblase liegen. Das kannst Du entweder mit z-index oder durch umsortieren Deines Codes erreichen. Das Bild und der Map-Code müssen nicht zwingend zusammen stehen.
Viele Grüße,
Daniel


studio-ahoi.de | Referenzen | Friends Of REDAXO

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: ImageMaps und jQuery

27. Jul 2015, 16:24

Ich würds mal mit diesem Plugin probieren. Tooltips gehen damit auch, sehe Demos.

http://www.outsharked.com/imagemapster

derkrebs
Beiträge: 149
Registriert: 4. Okt 2011, 17:27

Re: ImageMaps und jQuery

28. Jul 2015, 12:25

Hi,

danke für Eure Tipps - ich habe aber mittlerweile eine andere Lösung gefunden - ich verwende für die Sprechblasen nun das Tooltip-Widget von jQuery UI: https://jqueryui.com/tooltip/#custom-style

Gruß & Danke nochmal. :)

Michael

Zurück zu „Sonstiges“