Mauszeiger-Position relativ zu Div

nurnefrage09 · 14. Januar 2009

Hallo Leute,

habe folgendes Problem: Ich muss zu einem bestimmten Moment feststellen, ob sich der Mauszeiger über einem div-Bereich befindet. Keine dauerhafte Event-Überwachung also, sondern nur eine Momentaufnahme. Frage: Wie kann ich das mit JS machen?

Ich brauche dafür ja die Maus-Position relativ zur Layerposition.... Und da habe ich so meine Probleme. Danke für Hilfe!!

P.S.:
Hintergrund: In einem Div-Bereich, dem ich ein onMouseOut-Attribut gegeben habe, habe ich nachträglich Inhalte per JS geändert:

Code:

document.getElementById('mein_div').innerHTML='<b>geändert</b>';

Wenn ich nun mit der Maus über die Schrift 'geändert' fahre, spinnt mein Browser und blinkt blöd rum... Das will ich verhindern, indem ich bei der Anwendung von onMouseOut zunächst mal prüfe, ob der Mauszeiger wirklich "out" ist!

Quaese · 15. Januar 2009

Hi,

wenn ich dein Problem richtig verstehe, kommt dir die Eventvererbung in die Quere. Um das zu verhindern, muss diese mit cancelBubble (IE) bzw. stopPropagation gestoppt werden.

Für das document-Element wird zusätzlich der onmouseover-Event überwacht, bei dessen Eintreten die Änderungen für das DIV wieder rückgängig gemacht werden.

Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
window.onload = function(){
  document.onmouseover = function(event){
    document.getElementById("mein_div").innerHTML = "orginal";
  }
}

function myMouseOver(objEvt, strHTML){
  (window.event)? objEvt.cancelBubble = true
                : objEvt.stopPropagation();

  document.getElementById('mein_div').innerHTML = strHTML;
}
 //-->
</script>
</head>
<body>
<div onmouseover="myMouseOver(event, '<b>geändert</b>');">Dieser Text ist <div id="mein_div">orginal</div></div>
</body>
</html>

Ciao
Quaese

nurnefrage09 · 18. Januar 2009

Danke für die Tipps, aber ich verstehe das nicht so recht.

Es geht konkret um folgende Datei:
http://www.nilsole.net/else/ifj_hp/...er_medizin/strahlen_im_dienst_der_gesundheit/

Vereinfacht:

HTML:

<html>
<body>
<script language="JavaScript">

divvars = new Array();

divvars[0] = Array('Original1','Geändert1');
divvars[1] = Array('Original2','Geändert2');
divvars[2] = Array('Original3','Geändert3');
divvars[3] = Array('Original4','Geändert4');

function HoverRein(divnr)
{
document.getElementById('div'+divnr).innerHTML = divvars[divnr][1]';

}

function HoverRaus(divnr)
{
document.getElementById('div'+divnr).innerHTML = divvars[divnr][0];
}

</script>

<div id="div0" onMouseOver="javascript:HoverRein(0);" onMouseOut="javascript:HoverRaus(0);">&nbsp;</div>

<div id="div1" onMouseOver="javascript:HoverRein(1);" onMouseOut="javascript:HoverRaus(1);">&nbsp;</div>

<div id="div2" onMouseOver="javascript:HoverRein(2);" onMouseOut="javascript:HoverRaus(2);">&nbsp;</div>

<div id="div3" onMouseOver="javascript:HoverRein(3);" onMouseOut="javascript:HoverRaus(3);">&nbsp;</div>
</body>
</html>

Dort gibt es 4 verschiedene Div-Bereiche, die jeweils einen eigene MouseOver- und MouseOut-Veränderung haben. Wie mach ich das jetzt konkret? Danke für Tipps!

Quaese · 18. Januar 2009

Hi,

das Vorgehen ist folgendes:

Es werden zum einen die mouseover-Events der Elemente überwacht. Tritt ein solches Ereignis ein, wird die weitere Verbreitung unterbunden.
Zum anderen wird der mouseover-Event des document-Objekts überwacht. Tritt dieser ein, werden die Änderungen des bisherigen Events wieder rückgängig gemacht.

Beispiel:

Code:

<html>
<head>
<style type="text/css">
  <!--
#div0, #div1,
#div2, #div3{ width: 200px;
              height: 200px;
              margin: 50px;
              border: 1px solid #000;
              float: left;}
 //-->
</style>
<script type="text/javascript">
var intDivNr = -1;

divvars = new Array();

divvars[0] = Array('Original1','Geändert1');
divvars[1] = Array('Original2','Geändert2');
divvars[2] = Array('Original3','Geändert3');
divvars[3] = Array('Original4','Geändert4');

function HoverRein(objEvt, divnr){
  (window.event)? objEvt.cancelBubble = true
                : objEvt.stopPropagation();

  intDivNr = divnr;
  document.getElementById('div'+divnr).innerHTML = divvars[divnr][1];
}

function HoverRaus(divnr){
  document.getElementById('div'+divnr).innerHTML = divvars[divnr][0];
}

window.onload = function(){
  document.onmouseover = function(event){
    if(intDivNr != -1){
      HoverRaus(intDivNr);
      intDivNr = -1;
    }
  }
}
</script>
</head>
<body>
<div id="div0" onmouseover="javascript:HoverRein(event, 0);">&nbsp;</div>
<div id="div1" onmouseover="javascript:HoverRein(event, 1);">&nbsp;</div>
<div id="div2" onmouseover="javascript:HoverRein(event, 2);">&nbsp;</div>
<div id="div3" onmouseover="javascript:HoverRein(event, 3);">&nbsp;</div>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

Mauszeiger-Position relativ zu Div

nurnefrage09

Quaese

Moderator

nurnefrage09

Quaese

Moderator

Neue Beiträge