Ignorer l'interaction de la souris sur l'image de superposition

J'ai une barre de menu avec des effets de survol, et maintenant je veux placer une image transparente avec un cercle et un texte "dessiné à la main" sur l'un des éléments de menu. Si j'utilise le positionnement absolu pour placer l'image de superposition au-dessus de l'élément de menu, l'utilisateur ne pourra pas cliquer sur le bouton et l'effet de survol ne fonctionnera pas.

Existe-t-il un moyen de désactiver d'une manière ou d'une autre l'interaction de la souris avec cette image de superposition afin que le menu continue de fonctionner comme avant même s'il se trouve sous une image?

Éditer:

Parce que le menu a été généré avec joomla, je ne pouvais pas modifier un seul des éléments du menu. Et même si je pouvais, je ne pensais pas qu'une solution javascript était appropriée. Donc, à la fin, j'ai "marqué" l'élément de menu avec une flèche à l'extérieur de l'élément d'élément de menu. Pas aussi beau que je l'aurais voulu, mais ça a marché quand même.

La meilleure solution que j'ai trouvée est avec CSS Styling:

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

pointer-events l'attribut fonctionne plutôt bien et est simple.

J'ai donc fait cela et cela fonctionne dans Firefox 3.5 sur Windows XP. Il montre une boîte avec du texte, une superposition d'image et un div transparent au-dessus qui intercepte tous les clics.

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

Ce que j'ai fait: j'ai créé un div et l'ai dimensionné pour qu'il corresponde à ce qu'une option de menu pourrait être dimensionnée, 100x40px (une valeur arbitraire, mais cela aide à illustrer l'exemple).

Le div a une superposition d'image et une superposition de lien. Le lien contient un div dimensionné pour être le même que le div 'menuOption'. De cette façon, un clic utilisateur est capturé sur toute la boîte.

Vous devrez fournir votre propre image lors du test. :)

Mise en garde: Si vous vous attendez à ce que votre bouton de menu réponde à l'interaction de l'utilisateur (par exemple, changer de couleur pour simuler un bouton), vous aurez besoin d'un code supplémentaire attaché au javascript que vous invoquerez sur la balise, ce code supplémentaire pourrait adresser le ' menuOption 'via le DOM et changez sa couleur.

De plus, je ne connais aucun autre moyen de prendre un événement de clic et de le faire enregistrer sur un élément sous un élément de page visible. J'ai essayé cela aussi cet été et je n'ai trouvé aucune autre solution que celle-ci.

J'espère que cela t'aides.

PS: La rédaction des événements sur quirksmode m'a beaucoup aidé à comprendre comment les événements se comportent dans les navigateurs.

Donnez au bouton une propriété d'index z plus élevée que l'image dessinée à la main:

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

cependant, assurez-vous de le tester dans tous les principaux navigateurs. IE interprète le z-index différemment de FF. Pour que quelqu'un puisse fournir plus de détails, vous devrez publier plus d'informations, un lien serait préférable.

Sur la base de ce que Pekka Gaiser a dit, je pense que ce qui suit fonctionnera. Prendre son exemple et le retravailler:

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

Ici, vous devriez pouvoir placer un événement sur la balise a sous-jacente et, à moins que votre image ne comporte un événement, lance une capture (navigateurs! IE), puis tue la propagation de l'événement.

Si vous avez besoin d'un peu plus d'aide, dites-nous un peu plus sur la situation.

Si l'image est positionnée de manière statique, vous pouvez capturer l'événement de clic de l'image au fur et à mesure qu'elle bouillonne, en plaçant la balise img à l'intérieur de l'élément de menu.

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