• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

onmouseover soll nur an bestimmten Stellen Auswirkung haben

A

andynail

Mitglied
Hallo zusammen

für den ie weise ich dem Hintergrund die Funktion onmouseover zu. Nun muss ich aber noch weitere div zum positionieren verwenden und damit ist der onmouseover Kontakt im firefox versperrt. Weise ich dann diesem div onmouseover zu, führt ja jegliches Objekt in diesem div onmouseover aus.

Wie bekomme ich es hin, dass wenn ich mit der Maus nur über den Hintergrund fahre onmouseover Auswirkung zeigt?

Danke Gruß Andreas
 
Zuletzt bearbeitet:
Hallo,

erst einmal ich habe nicht verstanden was du meinst. Onmouseover ist ein Ereignis das vom Event-Handler ausgelöst wird. Dieses wird ausgelöst wenn die Maus sich in dem entsprechenden Element befindet.

Für weiter Details zeige uns am besten deinen Code oder einen Link zur Webseite.
 
Hallo

Ich weise dem im Hintergrund liegenden Bild eine onmouseover Funktion zu. Und vor dem Hintergrundbild steht ein weiteres Element das per div positioniert wird. Doch brauche ich noch für die korrekte Positionierung style display:block und align="center" Aber das heist ja dann, dass im firefox kein onmouseover Ereignis aus dem Hintergrundbild mehr ausgeführt wird, wenn man über dieses div mit der Maus fährt. Weise ich onmouseover diesem div zu, dann wird überall diese Funktion ausgeführt, egal über welches Element ich in diesem div fahre.

Also wie bekomme ich es hin, dass kein Element in diesem div eine Funktion ausführt, sondern nur wenn ich über den Hintergrund - sprich einer freien Fläche - mit der Maus drüberfahre?

Danke Gruß Andreas
ps: code in vollem Umfang ist nicht möglich und einen Link zu dieser Seite existiert nicht.
 
Zuletzt bearbeitet:
Nehmen wir an du hast 2 Quadrate. Ein kleines und ein grosses. Das kleine Quadrat liegt optisch innerhalb des grossen Quadrates. Wenn die Maus über das grosse Quadrat bewegt wird, wird das Ereignis onmouseover ausgelöst für das grosse Quadrat. Wenn die Maus über das kleine Quadrat innerhalb des grossen Quadrates bewegt wird, wird für das kleine Quadrat das Ereignis onmouseover ausgelöst.

Du hast also 2 Zustände:
1. Maus im grossen Quadrat.
2. Maus im kleinen Quadrat.

Wenn die Maus im grossen Quadrat ist soll sich die Farbe ändern.
Ist die Maus im kleinen Quadrat soll die Farbe wieder auf Ursprungsfarbe gesetzt werden.

So musst das machen. 2 Ereignisse 2 Funktionen.
 
Hallo Wustersoss

und vielen Dank für deine Hilfe. Doch um das geht es ja. Denn alle Objekte die in dem kleinen Quadrat stehen haben führen dann diese Funktion aus. Und genau das will ich vermeiden. Denn nicht der Inhalt des kleinen Quadrats soll die Funktion ausführen.

Danke Gruß Andreas
 
Verstehe schon, dann musst du dem Element eben auch ein onmousover mitgeben und dann schreiben was du rückgängig gemacht haben willst. Es geht nicht anders.
 
Hallo

vielen Dank für Deine Hilfe. Doch auch damit habe ich ein Problem, so dass ich es toll finde das der ie weiterhin die Funktion aus dem großen Quadrat ausführt, obwohl ich über das kleine Quadrat fahre. Und das nicht wenn ich über ein Element des kleinen Quadrats fahre.

Ist es also auch nicht möglich ein div so durchsichtig zu machen das weiterhin die Funktion des großen Quadrats ausgeführt wird?

Danke Gruß Andreas
 
Poste doch mal deinen Code, damit man mal sieht wie du es umgesetzt hast.

Ist es also auch nicht möglich ein div so durchsichtig zu machen das weiterhin die Funktion des großen Quadrats ausgeführt wird?
Zum Vergrößern anklicken....
Nein, da auch ein durchsichtiges Bild oder Quadrat ja das onmouseover Ereignis auslöst. Es hat halt nur eine andere Farbe, nämlich transparent.
 
Warum sollte sich das mit Javascript nicht lösen lassen?

Wenn der Mauszeiger auf Element A liegt, dann setze es auf z-index: -1 und hole dadurch Element B in den Vordergrund.
 
Warum sollte sich das mit Javascript nicht lösen lassen?
Zum Vergrößern anklicken....
Das habe ich ja nicht behaupted. Hast du den ganzen Faden gelesen, er versteht ja das mit dem DOM nicht und daher mein Heranführen. Wenn du ihm das so darlegst wird sich sofort die nächste Frage ergeben, weil er das Konzept des Eventhandlers nicht versteht.
 
andynail schrieb:
Ich weise dem im Hintergrund liegenden Bild eine onmouseover Funktion zu. Und vor dem Hintergrundbild steht ein weiteres Element das per div positioniert wird. Doch brauche ich noch für die korrekte Positionierung style display:block und align="center" Aber das heist ja dann, dass im firefox kein onmouseover Ereignis aus dem Hintergrundbild mehr ausgeführt wird, wenn man über dieses div mit der Maus fährt.
Zum Vergrößern anklicken....

Das stimmt nicht. Stichwort: „event bubbling“.

Den restlichen „Erklärungen“ kann ich keinen großartigen Sinn entnehmen.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">
            #outer, #inner {
                border: 10px solid blue;
                background: red;
            }

            #outer {
                width: 500px;
                height: 500px;
                padding: 100px;
            }

            #inner {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>

    <body>
        
        <div id="outer">
            <div id="inner"></div>
        </div>

    </body>

</html>

Also, das Problem ist, dass beim Überfahren von #inner auch das Mouseover-Ereignis von #outer ausgelöst wird?
 
Hallo zusammen

was soll ich bitte zeigen? Und ich wusste nicht wie auszudrücken. Das div soll ja nicht farblich transparent sein, sondern ohne jegliche Funktion sein.

Also dann setze ich den Hintergrund:

Code: 
echo "<div id='Hintergrund' name='Hintergrund' style='z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; visibility:hidden' onmouseover='SubMenueUp()' onclick='HideLinkDaten()'><img id='Hintergrundbild' name='Hintergrundbild' src='Pictures/$Hintergrund' style='height:100%; width:100%' onclick='HideLinkDaten()' onmouseover='SubMenueUp()'></div>";

und die Daten kommen dann so:

Code: 
<div id="DatenBereich" style="background-color:#000; position:relative; display:block; z-index:3; margin-left:4%; padding-left:120px" align="center" onmouseover="SubMenueUp(0)">

<table border="0" cellspacing="0px" style="border:0">
<tr>
<td id="FrameBereich" style="padding:0; height:auto; background-color:#CCCCCC; vertical-align:top; border:0; border-style:solid; border-color:#00ee00">
<iframe onfocus="top.ActiveFrame = 'DatenFrame'" id='DatenFrame' name='DatenFrame' frameborder="0" style='border:0' allowtransparency="true"></iframe>
</td>
</tr>
</table>

</div>

Ich wüsste nicht wie weiter und wäre begeistert wenn das zu lösen sei.

Danke Gruß Andreas
 
Die JS-Funktionen fehlen. Wofür steht SubMenueUp(0)?

Ohne jetzt genau zu wissen, was du eigentlich bezwecken willst: Vielleicht ist es ja gar nicht notwendig, die Anordnung der Div's zu ändern, sofern man dem oberen per Event-Handler die Funktionalität gibt, die das darunter liegende ausführen soll. Außerdem macht es bei komplexeren Problemstellungen meistens Sinn, eine Aufgabe soweit wie möglich zu trivialisieren und sie anschließend wieder zu erweitern.

1. Kopiere das Beispiel von Mermshaus

2. Lies dir hier durch, wie man durch Auswahl eines Elementes ein anderes beeinflussen kann.

jQuery: The Write Less, Do More, JavaScript Library

3. Füge dem oberen Div eine Funktion hinzu, die dem unteren eine CSS-Klasse (oder was immer dir vorschwebt), zuweist.

4. Wenn das funktioniert, kannst du das Problem wahrscheinlich selbstständig lösen, oder bist zumindest in der Lage, deine Fragestellung zu präzisieren.
 
Ich verstehe nicht, was so schwierig daran ist, ein brauchbares Beispiel zu posten.

Ist es ein so abwegiger Gedankengang, Quellcode so zu posten, dass er in einem Vorgang kopierbar ist und sofort lokal getestet werden kann, ohne dass jeder, der das versucht, noch individuell viele Arbeitsschritte ausführen muss?

HTML-Rahmen schreiben, JS-Code schreiben (ohne großartige Anhaltspunkte zu haben, was der tun soll), PHP-Befehle auflösen (PHP-Befehle!), …

Na ja, ich habe es versucht.



Vorhin habe ich dieses Beispiel vorbereitet. Ob es zur Fragestellung passt? Wer weiß das schon.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            /*<![CDATA[*/

            $(function () {
                $('#outer').bind('mouseover', function () {
                    $(this).css({background : 'green'});
                }).bind('mouseout', function () {
                    $(this).css({background : 'red'});
                });

                $('#inner').bind('mouseover', function (event) {
                    $(this).css({background : 'green'});
                    event.stopPropagation();
                }).bind('mouseout', function () {
                    $(this).css({background : 'red'});
                });
            });

            /*]]>*/
        </script>

        <style type="text/css">
            #outer, #inner {
                border: 10px solid blue;
                background: red;
            }

            #outer {
                width: 500px;
                height: 500px;
                padding: 100px;
            }

            #inner {
                width: 100px;
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div id="outer">
            <div id="inner">

            </div>
        </div>

    </body>

</html>
 
Hallo zusammen

Code: 
<html>
<head>
<script type="text/javascript">
function ShowSubMenue()
{
document.getElementById("SubMenue").style.visibility = "visible"
}
function SubMenueUp()
{
document.getElementById("SubMenue").style.visibility = "hidden"
}
</script>
</head>
<body>
<div style="position:absolute; width:100%; height:100%; background-color:green; z-index:1" onmouseover="SubMenueUp()"></div>
<div id="DatenBereich" style="position:relative; top:100px; display:block; background-color:red; z-index:2" align="center">
<table>
<tr><td>Daten Zeile 1</td></tr>
<tr><td>Daten Zeile 2</td></tr>
<tr><td>Daten Zeile 3</td></tr>
</table>
<input type="button" onclick="ShowSubMenue()" value="SubMenue">
</div>
<div style="position:absolute; z-index:2; visibility:hidden; top:0; left:0" id="SubMenue">und dieser Text soll das SubMenue darstellen</div>
</body>
</html>

Dieser Code spiegelt mein Problem wieder. Denn würde ich dem div Datenbereich auch die Funktion SubMenueUp() zuweisen, würde diese ja egal auf welchem Objekt auch immer beim darüberfahren ausgeführt werden. Aber wäre das Zuweisen ja notwendig, da der Zugriff auf onmouseover des Hintergrundes versperrt wird. Und alle Objekte kann ich nicht in das Hintergrund div einsetzen.

Danke Gruß Andreas
 
Zuletzt bearbeitet:
Vielen Dank für eure Informationen. Doch jetzt bin ich mit meinem Latein am Ende, so dass ich hiermit das Thema beende.

Gruß Andreas Nagel
 
Evtl. wäre es sinnvoll sich mit Evenbubbling zu beschäftigen oder gleich, wie schon vorgeschlagen, ein Framework zu benutzen, dass dir die meiste Arbeit beim Umgang mit Events abnimmt.
 
Ich verstehe das Problem leider auch noch immer nicht, weil ich nicht nachvollziehen kann, was wann korrekterweise passieren sollte.

Das Beispiel nimmt aber definitiv Form an. Das ist schon ganz gut.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben