Abfragen von mouseover mit JavaScript

  • Abfragen von mouseover mit JavaScript

    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 :

    Quellcode

    1. #A{
    2. position:absolute; left:50px; top:50px; border-style:solid; border-width:3px; height:110px; width:110px;
    4. }
    6. #B{
    8. position:absolute; left0px; top:0px; text-align:center; background-color:red; height:50px; width:50px; z-index:0;
    10. }
    11. #C{
    12. position:absolute; left:20px; top:20px; text-align:center; background-color:yellow; height:50px; width:50px; z-index:1;
    13. }
    14. #D{
    15. position:absolute; left:40px; top:40px; text-align:center; background-color:lime; height:50px; width:50px; z-index:2;
    16. }
    18. #E{
    19. position:absolute; left:60px; top:60px; text-align:center; background-color:aqua; height:50px; width:50px; z-index:3;
    20. }
    22. -->
    Alles anzeigen


    (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


    Quellcode

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


    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 :

    Quellcode

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


    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

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von the_old_Pirate ()

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

    Quellcode

    1. var zIndex=5000;
    2. function popUp(element)
    3. {
    4. element = document.getElementById(element);
    5. zIndex++;
    6. element.style.zIndex = zIndex;
    7. }


    Quellcode

    1. <div id="A" onmouseover="popUp('A')"></div>
    2. <div id="B" onmouseover="popUp('B')"></div>
    3. <div id="C" onmouesover="popUp('C')"></div>
    4. <div id="D" onmouseover="popUp('D')"></div>
    5. <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:

    Quellcode

    1. function onLoad()
    2. {
    3. document.getElementById("A").onmouseover="popUp('A')";
    4. document.getElementById("B").onmouseover="popUp('B')";
    5. document.getElementById("C").onmouseover="popUp('C')";
    6. document.getElementById("D").onmouseover="popUp('D')";
    7. document.getElementById("E").onmouseover="popUp('E')";
    8. }


    das müsste das auch valide sein...
    </nobrain>

  • 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 :

    Quellcode

    1. var zspeicher
    2. funciton popUp(element){
    3. zspeicher= document.getElementById(element);
    4. // zspeicher speichert das unveränderete Element
    5. ...
    6. ...
    7. ...
    8. }
    10. function popDown(element)[
    11. zspeicher auslesen
    12. var current = document.getElementById(element);
    13. //speicher das aktuelle Element
    14. current.style.zIndex=zindex im zspeicher
    16. }
    Alles anzeigen


    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 :

    Quellcode

    1. var zspeicher;
    2. function popUp(element){
    3. zspeicher=document.getElementById(element).style.zIndex;
    4. //speichert element unverändert zwischen
    5. alert(zspeicher);
    6. //gibt testweiße den zIndex von unverändertem element aus
    7. var ebene1=4;
    8. var rule = document.getElementById(element);
    9. rule.style.zIndex=ebene1;
    10. }
    13. funciton popDown(element){
    14. var ursprung=zspeicher;
    15. alert(ursprung);
    16. var ebene=document.getElementById(element);
    17. ebene.style.zIndex=ursprung;
    18. }
    Alles anzeigen

    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 ?

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von the_old_Pirate ()

  • Quellcode

    1. var zIndexUp=50000;
    2. var zIndexDown = 50000;
    3. function popDown(element)
    4. {
    5. element.style.zIndex = zIndexDown--;
    6. }
    7. function popUp(element)
    8. {
    9. element.style.zIndex = zIndexUp++;
    10. }


    Quellcode

    1. <div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
    2. <div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
    3. <div onmouesover="popUp(this)" onmouseout="popDown(this)"></div>
    4. <div onmouseover="popUp(this)" onmouseout="popDown(this)"></div>
    5. <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:


    Quellcode

    1. var zIndexUp=50000;
    2. var zIndexDown = 50000;
    3. function popDown(element)
    4. {
    5. element = document.getElementById(element);
    6. element.style.zIndex = zIndexDown--;
    7. }
    8. function popUp(element)
    9. {
    10. element = document.getElementById(element);
    11. element.style.zIndex = zIndexUp++;
    12. }
    Alles anzeigen



    Quellcode

    1. <div id="A" onmouseover="popUp('A')" onmouseout="popDown('A')"></div>
    2. <div id="B" onmouseover="popUp('B')" onmouseout="popDown('B')"></div>
    3. <div id="C" onmouesover="popUp('C')" onmouseout="popDown('C')"></div>
    4. <div id="D" onmouseover="popUp('D')" onmouseout="popDown('D')"></div>
    5. <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:

    Quellcode

    1. function onLoad()
    2. {
    3. document.getElementById("A").onmouseover="popUp('A')";
    4. document.getElementById("B").onmouseover="popUp('B')";
    5. document.getElementById("C").onmouseover="popUp('C')";
    6. document.getElementById("D").onmouseover="popUp('D')";
    7. document.getElementById("E").onmouseover="popUp('E')";
    8. document.getElementById("A").onmouseout="popDown('A')";
    9. document.getElementById("B").onmouseout="popDown('B')";
    10. document.getElementById("C").onmouseout="popDown('C')";
    11. document.getElementById("D").onmouseout="popDown('D')";
    12. document.getElementById("E").onmouseout="popDown('E')";
    13. }
    Alles anzeigen


    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...
    </nobrain>