wake-up-neo.com

Mausinteraktion auf dem Overlay-Bild ignorieren

Ich habe eine Menüleiste mit Hover-Effekten, und jetzt möchte ich ein transparentes Bild mit einem Kreis und einem "handgezeichneten" Text über einem der Menüelemente platzieren. Wenn ich das Überlagerungsbild mithilfe der absoluten Positionierung über dem Menüelement platziere, kann der Benutzer nicht auf die Schaltfläche klicken und der Hover-Effekt funktioniert nicht. 

Gibt es eine Möglichkeit, die Mausinteraktion mit diesem Overlay-Bild irgendwie zu deaktivieren, sodass das Menü weiterhin wie zuvor funktioniert, auch wenn es sich unterhalb eines Bildes befindet?

Bearbeiten:

Da das Menü mit Joomla erstellt wurde, konnte ich nicht nur einen der Menüpunkte anpassen. Und selbst wenn ich könnte, dachte ich nicht, dass eine Javascript-Lösung angemessen wäre. Am Ende habe ich den Menüpunkt mit einem Pfeil außerhalb des Menüpunktelements "markiert". Nicht so schön, wie ich es mir gewünscht hatte, aber es hat trotzdem geklappt.

83
Daniel

Die beste Lösung, die ich gefunden habe, ist mit CSS-Styling:

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events Attribut funktioniert ziemlich gut und ist einfach.

213
DZenBot

Also habe ich das gemacht und es funktioniert in Firefox 3.5 unter Windows XP. Es zeigt ein Feld mit Text, eine Bildüberlagerung und ein transparentes Div, das alle Klicks abfängt.

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

Was ich getan habe: Ich habe ein div entworfen und die Größe der Menüoption auf 100x40px festgelegt (ein beliebiger Wert, der jedoch bei der Veranschaulichung des Beispiels hilfreich ist).

Das div hat eine Bildüberlagerung und eine Linküberlagerung. Der Link enthält ein div, dessen Größe mit dem 'menuOption' div übereinstimmt. Auf diese Weise wird ein Benutzerklick über die gesamte Box erfasst.

Sie müssen beim Testen ein eigenes Bild angeben. :)

Vorsichtsmaßnahme: Wenn Sie davon ausgehen, dass Ihre Menüschaltfläche auf die Benutzerinteraktion reagiert (z. B. das Ändern der Farbe, um eine Schaltfläche zu simulieren), benötigen Sie zusätzlichen Code, der an das Javascript angehängt wird, das Sie für das Tag aufrufen Adressieren Sie das 'menuOption'-Element über das DOM und ändern Sie die Farbe.

Es gibt auch keine andere Möglichkeit, wie Sie wissen, dass Sie ein Klickereignis durchführen und ein Element unter einem sichtbaren Seitenelement registrieren lassen können. Ich habe das auch diesen Sommer versucht und keine andere Lösung als diese gefunden.

Hoffe das hilft.

PS: Das Aufschreiben von Ereignissen im quirksmode hat mir sehr geholfen, zu verstehen, wie sich Ereignisse in Browsern verhalten.

2
Mike Mytkowski

Geben Sie der Schaltfläche eine höhere Z-Index-Eigenschaft als das von Hand gezeichnete Bild:

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

stellen Sie jedoch sicher, dass Sie es in allen gängigen Browsern testen. IE interpretiert den Z-Index anders als FF . Wenn jemand weitere Details erfahren möchte, müssten Sie weitere Informationen posten, ein Link wäre am besten.

1
Pekka 웃

Aufbauend auf dem, was Pekka Gaiser gesagt hat, denke ich, dass das Folgende funktionieren wird. Nehmen Sie sein Beispiel und überarbeiten Sie es:

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

Hier sollten Sie in der Lage sein, ein Ereignis auf das zugrunde liegende a-Tag zu setzen. Sofern Ihr Image kein Ereignis enthält, wird eine Erfassung (! IE-Browser) initiiert und die Weitergabe des Ereignisses beendet.

Wenn Sie mehr Hilfe benötigen, lassen Sie uns etwas mehr über die Situation wissen.

0
jeremyosborne

Wenn das Bild statisch positioniert wird, können Sie das Klickereignis während des Aufblasens des Bildes erfassen, indem Sie das img-Tag in das Menüelement einfügen.

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>
0
bogphanny