Ignorieren Sie die Mausinteraktion auf dem Overlay-Bild

Ich habe eine Menüleiste mit Hover-Effekten und möchte jetzt ein transparentes Bild mit einem Kreis und einem "handgezeichneten" Text über einem der Menüelemente platzieren. Wenn ich das Overlay-Bild mit absoluter Positionierung über dem Menüpunkt 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, damit das Menü wie zuvor weiter funktioniert, obwohl es sich unter einem Bild befindet?

Bearbeiten:

Da das Menü mit Joomla erstellt wurde, konnte ich nicht nur einen der Menüpunkte optimieren. Und selbst wenn ich könnte, hielt ich eine Javascript-Lösung nicht für angemessen. Also habe ich am Ende 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.

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.

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 darüber, 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 erstellt und es so dimensioniert, dass es einer Menüoption von 100 x 40 Pixel entspricht (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 Ihr eigenes Image bereitstellen. :) :)

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

Ich weiß auch nicht, dass Sie ein Klickereignis auf einem Element unter einem sichtbaren Seitenelement registrieren können. Ich habe dies 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.

Geben Sie der Schaltfläche eine höhere Z-Index-Eigenschaft als dem handgezeichneten 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. Damit jemand mehr Details erfinden kann, müsste er mehr Informationen posten. Ein Link ist am besten.

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 dem zugrunde liegenden a-Tag zu platzieren und, sofern Ihr Bild kein Ereignis enthält, eine Erfassung (! IE-Browser) zu initiieren und dann die Weitergabe des Ereignisses zu beenden.

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

Wenn das Bild statisch positioniert wird, können Sie das Klickereignis aus dem Bild beim Sprudeln erfassen, indem Sie das img-Tag in das Menüelementelement einfügen.

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