onmouseover - Problem

FrozenFox · 15.11.2006, 09:28

Hallo allerseits!

Ich hab ein kleines Problem mit einem mouseover-Effekt.

Die Lösung ist wahrscheinlich naheliegend, aber ich steh da irgendwie auf der Leitung...

Ich will, dass wenn man über ein bestimmtes Element fährt, ein div an der Stelle erscheint. Das passiert auch, nur immer und immer wieder ...

Wie kann man das ändern?

Mein Code ist der:

Code:

<html>
 <head>
  <title>Balloon</title>
  <script type="text/javascript">
	/* get top-position of element */	
	function abstop(i)	{ return (i.offsetParent) ? i.offsetTop+abstop(i.offsetParent) : i.offsetTop; }
	function absleft(i){ return (i.offsetParent) ? i.offsetLeft+absleft(i.offsetParent) : i.offsetLeft; }

	function showBalloon(mouse, id, img, text) {
		oDiv = document.getElementById(id);
		yPos = abstop(mouse)+5;
		xPos = absleft(mouse)+5;
	    oDiv.style.left    = xPos+'px';
	    oDiv.style.top     = yPos+'px';
		oDiv.style.display = 'block';
		oDiv.innerHTML     = '[img]'+img+'[/img]
'+text;
	}
	function hideBalloon(id) {
		document.getElementById(id).style.display = 'none';
	}
  </script>
 </head>
 <body>
  <div style="width:50px; height:50; background:blue;" onmouseover="javascript:showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')" onmouseout="javascript:hideBalloon('id_1')"></div>
  xxx
  <div style="width:50px; height:50; background:blue;" onmouseover="javascript:showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')" onmouseout="javascript:hideBalloon('id_1')"></div>
  xxx
  <div style="width:50px; height:50; background:blue;" onmouseover="javascript:showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')" onmouseout="javascript:hideBalloon('id_1')"></div>
  xxx
  <div style="width:50px; height:50; background:blue;" onmouseover="javascript:showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')" onmouseout="javascript:hideBalloon('id_1')"></div>
  xxx
  <div style="width:50px; height:50; background:blue;" onmouseover="javascript:showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')" onmouseout="javascript:hideBalloon('id_1')"></div>
  xxx
  <div id="id_1" style="position:absolute; width:118px; height:123; text-align:center; background:url(../img/balloon.gif); display:none;"></div>
 </body>
</html>

Vielen Dank im Vorraus für jede Antwort!

Zergling-new · 15.11.2006, 10:54

Das hat einen einfachen Grund: Du fährst mit der Maus über einen <div>, der Ballon wird angezeigt. Durch das Anzeigen und seine Position schiebt er sich aber unter die aktuelle Mausposition. Dadurch wird onmouseout ausgeführt, der Ballon wird wieder versteckt. Sein Verschwinden hat zur Folge, dass deine Maus jetzt plötzlich doch wieder direkt über dem <div> ist und das ganze Spiel geht von vorne los.

Entweder musst du im Ballon einen Flag setzen, wenn sich deine Maus darüber befindet, so dass onmouseout nicht ausgeführt wird oder du legst den Ballon eben nicht dahin, wo auch die Maus alles zum Flackern bringen kann.
Kannst auch mit Timern arbeiten.

Übrigens nettes Skript, selber geschrieben? "javascript:" ist übrigens bei "on.."-Attributen nicht nötig: Es wird dort sowieso nur JavaScript erwartet.

FrozenFox · 15.11.2006, 11:12

Zitat:

Das hat einen einfachen Grund: Du fährst mit der Maus über einen <div>, der Ballon wird angezeigt. Durch das Anzeigen und seine Position schiebt er sich aber unter die aktuelle Mausposition. Dadurch wird onmouseout ausgeführt, der Ballon wird wieder versteckt. Sein Verschwinden hat zur Folge, dass deine Maus jetzt plötzlich doch wieder direkt über dem <div> ist und das ganze Spiel geht von vorne los.

AHA!

Wenn man das Problem erkennt, ist die Lösung gleich viel näher :wink:

Ich hab es also so gemacht:

Code:

function hideBalloon(id) {
	id.style.display = 'none';
}
...
...
...
<div style="width:50px; height:50; background:blue;" onmouseover="showBalloon(this, 'id_1', '../img/labels/bg_library.gif', 'text text text')">
</div>
<div id="id_1" style="position:absolute; width:118px; height:123; text-align:center; background:url(../img/balloon.gif); display:none;" onmouseout="hideBalloon(this)"></div>

Jetzt wird das mouseover nur noch gemacht, wenn man vom Ballon runtergeht. Ist zwar nicht 100% das was ich wollte, aber vielleicht sogar userfreundlicher...

Der Code stammt von mir

bis auf die beiden Funktionen abstop und absleft zur Ermittlung der Mausposition, die hab ich im Net gefunden und nur modifiziert.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Textarea bei onmouseover vergrößern - IE Problem	R4v3r	HTML, Usability und Barrierefreiheit	3	07.05.2008 17:02
Sessions Problem	StephenKing	PHP Tipps 2008	3	16.10.2007 08:30
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Array Problem [Ansatz ?]		PHP Tipps 2005	0	27.01.2005 18:24
Problem bei Massenmails versenden mit der Funktion mail		PHP-Fortgeschrittene	3	19.01.2005 13:36
Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34
[Erledigt] Problem mit Timestamp!		PHP Tipps 2004	24	08.06.2004 19:51
Login Problem		PHP Tipps 2004	4	04.06.2004 18:46
foreach problem	mAy^daY	PHP Tipps 2004	3	02.06.2004 20:29


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

15.11.2006, 10:54
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Das hat einen einfachen Grund: Du fährst mit der Maus über einen <div>, der Ballon wird angezeigt. Durch das Anzeigen und seine Position schiebt er sich aber unter die aktuelle Mausposition. Dadurch wird onmouseout ausgeführt, der Ballon wird wieder versteckt. Sein Verschwinden hat zur Folge, dass deine Maus jetzt plötzlich doch wieder direkt über dem <div> ist und das ganze Spiel geht von vorne los. Entweder musst du im Ballon einen Flag setzen, wenn sich deine Maus darüber befindet, so dass onmouseout nicht ausgeführt wird oder du legst den Ballon eben nicht dahin, wo auch die Maus alles zum Flackern bringen kann. Kannst auch mit Timern arbeiten. Übrigens nettes Skript, selber geschrieben? "javascript:" ist übrigens bei "on.."-Attributen nicht nötig: Es wird dort sowieso nur JavaScript erwartet.