Abfragen von mouseover mit JavaScript

Intermediate

Saturday, January 15th 2011, 1:22pm

Hallo liebe Script Freunde!

Ich habe da folgendes Problem:

Ich erstelle ein XHTML 1.1 konformes Dokument und erstelle 5 Div Blöcke:
der erste Div block ist der Umrandente also sozusagen der Rahmen. nun werden innerhalb diesen Rahmens noch 4 weiter Divblöcke mit verschiedenen Farben erstellt
die sich gegenseitig überlappen über eine zentrale css regel werden nun Größe, Farbe, zIndex, usw festgelegt das ganz sieht dann folgendermaßen aus :

Cascading Style Sheets

#A{
position:absolute; left:50px; top:50px;	border-style:solid; border-width:3px; height:110px; width:110px;
 
}
 
#B{
 
position:absolute; left0px; top:0px; text-align:center; background-color:red; height:50px; width:50px; z-index:0;
 
}
#C{
 position:absolute; left:20px; top:20px; text-align:center; background-color:yellow; height:50px; width:50px; z-index:1;
}
#D{
  position:absolute; left:40px; top:40px; text-align:center; background-color:lime; height:50px; width:50px; z-index:2;
}
 
#E{
 position:absolute; left:60px; top:60px; text-align:center; background-color:aqua; height:50px; width:50px; z-index:3;
}
 
-->

(Bild wie der ausgeführte Code aussieht hängt an !)

so nun kommen wir zum eigentlichen Problem ich möchte nun den zIndex ändern in dem ich mit der Maus über den Jeweiligen Div Block fahre also soll der div Block über dem gerade meine Maus steht sozusagen in den Vordergrund plobben dafür habe ich folgenden Code mit JS geschrieben

JavaScript Code

function ebeneQ1(){
var ebene1=4;
// Quadrat Q1
var rule=document.styleSheets[0].cssRules[0].style.zIndex=ebene1;
 
}

so nun dachte ich mir eigentlich bräuchte ich nun diese Funktion für alle 4 div Elemente was mich zu der Frage brachte könnte ich das ganze nicht irgend wie in eine Funktion packen und abfragen auf
welchen element ich mich denn gerade Befinde??

also ungefähr so :

	JavaScript Code
1 2 3	if (onmouseover == Element("B"){ ändere Ebene }

nach dem ich google zu dieser Frage bemüht habe war mir klar das ich onmouseover nicht abfragen kann mein nächster Gedanke war es nun das Element abzufragen über document.getElementById() oder sowas jedoch funktioniert das ganze auch nicht

deshalb die Frage an euch gibt es eine möglichkeit das ganze irgnewie abzufragen ?

außerdem ist mir aufgefallen das ich mit document.getElementById() nicht auf Zentrale Css Regeln zugreifen kann deshalb auch das (document.styleSheets[0].cssRules[0].style.zIndex=ebene1

allerdings ist das meines wissens nach DOM level 1.2 ist doch richtig oder ? Ich würde mich allerdings lieber an die Aufgabenstellung halten und DOM level 1.1 benutzen gibt es da eine Möglichkeit ?

Mit freundlichen Grüßen

This post has been edited 1 times, last edit by "the_old_Pirate" (Jan 15th 2011, 1:57pm)

n0x-f0x

Trainee

Posts: 50

2

Saturday, January 15th 2011, 5:01pm

sry wenn das bei XHTML 1.1 nicht geht, aber ich würde das so lösen:

JavaScript Code

var zIndex=5000;
function popUp(element)
{
    element = document.getElementById(element);
    zIndex++;
    element.style.zIndex = zIndex;
}

HTML Code

<div id="A" onmouseover="popUp('A')"></div>
<div id="B" onmouseover="popUp('B')"></div>
<div id="C" onmouesover="popUp('C')"></div>
<div id="D" onmouseover="popUp('D')"></div>
<div id="E" onmouseover="popUp('E')"></div>

Wenn es das onmouseover attribut nicht gibt musst du im body tag eine onload funktion angeben, die folgendes tut:

JavaScript Code

function onLoad()
{
    document.getElementById("A").onmouseover="popUp('A')";
    document.getElementById("B").onmouseover="popUp('B')";
    document.getElementById("C").onmouseover="popUp('C')";
    document.getElementById("D").onmouseover="popUp('D')";
    document.getElementById("E").onmouseover="popUp('E')";
}

das müsste das auch valide sein...

Torben Brodt

Administrator

Posts: 8,454

3

Saturday, January 15th 2011, 7:44pm

@n0x-f0x: noch besser ist es wenn du statt den String "A" zu übergeben, ist es einfach mit this die Referenz übergibst.

	HTML Code
1	<div onmouseover="popUp(this)"></div>

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

the_old_Pirate

Intermediate

Posts: 105

4

Sunday, January 16th 2011, 11:20am

Hallo danke für die Antworten es funktioniert nun !
Außer der Vorschlag von donut mit der this referenz das mag er irgenwie gar nicht !

so nun ist mir aber aufgefallen das ich das ganze noch zurücksetzen sollte also praktisch wenn ich mit der Maus rausfahre die ursprüngliche ebene einsetzen sollte wie könnte ich das am besten realsieren ????

hab es nun mit einem zwischenspiecher für den zindex versucht ungefähr so :

JavaScript Code

var zspeicher
 funciton popUp(element){
 zspeicher= document.getElementById(element);
 // zspeicher speichert das unveränderete Element
 ...
 ...
 ...
 }
 
 function popDown(element)[
 zspeicher auslesen 
 var current = document.getElementById(element);
 //speicher das aktuelle Element
 current.style.zIndex=zindex im zspeicher
 
 }

so jetzt weiß ich aber nicht wie kann ich den dem element im zspeicher sagen das ich nun sein zIndex haben möchte ???

so hab das ganze mal probiert dabei ist mir folgendes aufgefallen erstmal der Code :

JavaScript Code

var zspeicher;
function popUp(element){
zspeicher=document.getElementById(element).style.zIndex;
//speichert element unverändert zwischen
alert(zspeicher);
//gibt testweiße den zIndex von unverändertem element aus
var ebene1=4;
var rule = document.getElementById(element);
rule.style.zIndex=ebene1;
}
 
 
funciton popDown(element){
var ursprung=zspeicher;
alert(ursprung);
var ebene=document.getElementById(element);
ebene.style.zIndex=ursprung;
}

so also habs jetzt geschaft allerding gibt mir alert immernoch ein leeres fenster aus aber eigentlich sollte er mir doch den wert des zIndex ausgeben warum tut er das also nicht ?

This post has been edited 2 times, last edit by "the_old_Pirate" (Jan 16th 2011, 12:12pm)

Torben Brodt

Administrator

Posts: 8,454

5

Sunday, January 16th 2011, 11:54am

Warum willst du den alten zIndex wiederherstellen? Der zIndex ist als globale Variable definiert und wird immer größer, das genügt doch...

	JavaScript Code
1 2 3 4	var zIndex=5000; function popUp(element) { element.style.zIndex = ++zIndex; }

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

the_old_Pirate

Intermediate

Posts: 105

6

Sunday, January 16th 2011, 12:14pm

Oh du hast recht donut liegt wohl daran das ich des ganze etwas anders gelößt habe naja es funzt nun kannste ja oben im beitrag lesen hab ich grade nochmal editiert würde trotzdem noch gerne wissen warum er mir den wert des zindexes nicht ausgibt und nur ein leeres fenster ausspuckt ?

Torben Brodt

Administrator

Posts: 8,454

7

Sunday, January 16th 2011, 4:05pm

Welches Posting hast du geändert? Poste doch bitte deine aktuelle Frage hier... alte Postings zu ändern ist sehr verwirrend und für keinen der anderen, die dir hier helfen könnten nachvollziehbar.
Im Code oben hast du übrigens "funciton" falsch geschrieben. JavaScript Fehler solltest du via Firebug lösen.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

n0x-f0x

Trainee

Posts: 50

8

Monday, January 17th 2011, 10:12am

JavaScript Code

var zIndexUp=50000;
var zIndexDown = 50000;
function popDown(element)
{
  element.style.zIndex = zIndexDown--;
}
function popUp(element)
{
  element.style.zIndex = zIndexUp++;
}

HTML Code

<div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
<div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
<div onmouesover="popUp(this)" onmouseout="popDown(this)"></div>
<div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
<div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>

Sollte das mit dem this nicht gehen (ich weiß nicht wie Netscape das Implementiert, glaube aber das der auch keinen zIndex kennt

) musst du dashier nehmen:

JavaScript Code

var zIndexUp=50000;
var zIndexDown = 50000;
function popDown(element)
{
  element = document.getElementById(element);
  element.style.zIndex = zIndexDown--;
}
function popUp(element)
{
  element = document.getElementById(element);
  element.style.zIndex = zIndexUp++;
}

HTML Code

<div id="A" onmouseover="popUp('A')" onmouseout="popDown('A')"></div>
<div id="B" onmouseover="popUp('B')" onmouseout="popDown('B')"></div>
<div id="C" onmouesover="popUp('C')" onmouseout="popDown('C')"></div>
<div id="D" onmouseover="popUp('D')" onmouseout="popDown('D')"></div>
<div id="E" onmouseover="popUp('E')" onmouseout="popDown('E')"></div>

Und wenn der quatsch dann nicht xhtml 1.1 valide ist, machst du einfach das onmouseover und onmouseout weg und fügst folgende onload function für den body hinzu:

JavaScript Code

function onLoad()
{
    document.getElementById("A").onmouseover="popUp('A')";
    document.getElementById("B").onmouseover="popUp('B')";
    document.getElementById("C").onmouseover="popUp('C')";
    document.getElementById("D").onmouseover="popUp('D')";
    document.getElementById("E").onmouseover="popUp('E')";
    document.getElementById("A").onmouseout="popDown('A')";
    document.getElementById("B").onmouseout="popDown('B')";
    document.getElementById("C").onmouseout="popDown('C')";
    document.getElementById("D").onmouseout="popDown('D')";
    document.getElementById("E").onmouseout="popDown('E')";
}

Die Idee mit einem Zwischenspeicher ist garnicht so schlecht jedoch kann es passieren dass die Maus erst in ein div kommt, bevor es aus einem andern kommt, dann bräuchtest du einen fifi speicher "first in first out". Wäre in Javascript sehr rechenintensiv, jedenfalls das wo ich dran denke...

Coder Forum