tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
1680
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 14.01.09 23:21 #1
    nurnefrage09 Tutorials.de Gastzugang
    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 :
    1

    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!
     
    Zitieren Zitieren
  2. 15.01.09 00:20 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <!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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  3. 18.01.09 15:46 #3
    nurnefrage09 Tutorials.de Gastzugang
    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/s...er_gesundheit/

    Vereinfacht:

    HTML-Code:
    <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!
     
    Zitieren Zitieren
  4. 18.01.09 19:30 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

    <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
    Geändert von Quaese (18.01.09 um 19:49 Uhr) Grund: HTML-Gerüst im Code ausgebessert
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
« einfaches toggle | Ajax im MSIE 6 »

Ähnliche Themen

  1. CSS Layout mit position absolute und relativ möglich?
    Von dirk80 im Forum CSS
    Antworten: 6
    Letzter Beitrag: 08.09.07, 12:10
  2. Absolute Position eines Objekts relativ zu einem Div festlegen.
    Von DaRula im Forum CSS
    Antworten: 2
    Letzter Beitrag: 11.07.06, 13:08
  3. position relativ zum mc-container berechnen
    Von harrry im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 02.05.05, 15:15
  4. div position:relativ
    Von Kussilein im Forum CSS
    Antworten: 3
    Letzter Beitrag: 19.11.04, 21:42
  5. Layer Position relativ absolut festlegen! *g*
    Von Terrance & Philipp im Forum Javascript & Ajax
    Antworten: 6
    Letzter Beitrag: 07.10.02, 10:32

Stichworte