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

Question

J'ai une barre de menu avec les effets de survol, et maintenant je veux mettre une image transparente avec un cercle et un "handdrawn" texte sur l'un des éléments de menu. Si j'utilise le positionnement absolu superposer l'image ci-dessus l'élément de menu, l'utilisateur ne sera pas en mesure de cliquer sur le bouton et l'effet hover ne fonctionne pas.

Est-il possible de faire en quelque sorte désactiver l'interaction de la souris avec cette superposition de l'image de sorte que le menu va continuer à travailler comme avant, même si c'est sous une image?

Edit:

Parce que le menu a été générée avec joomla, je ne pouvais pas tweak tout simplement l'un des éléments de menu. Et même si je pouvais, je ne me sentais pas une solution d'activer javascript était approprié. Donc au final j'ai "marqué" l'élément de menu avec une flèche à l'extérieur de l'option de menu de l'élément. Pas aussi beau que je l'avais voulu, mais il a okey de toute façon.

Answer 1

Il pourrait être trop tard pour cela, mais la meilleure solution que j'ai trouvé est avec le Style CSS:

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

"pointer-events" attribut fonctionne très bien et simple.

Answer 2

J'ai donc fait cela et il fonctionne dans Firefox 3.5 sur Windows XP. Il montre une boîte contenant un texte, d'une superposition d'image, et un transparent div ci-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 de la taille à être ce qu'est une option de menu peut être dimensionné pour, 100x40px (d'une valeur arbitraire, mais il contribue à illustrer l'échantillon).

La div a une superposition d'image, et un lien de superposition. Le lien contient un div de taille à être le même que le "menuOption' div. De cette façon, un utilisateur, cliquez sur est capturé à travers l'ensemble de la zone.

Vous devrez fournir votre propre image lors de l'essai. :)

Mise en garde: Si vous prévoyez votre menu bouton pour répondre à l'interaction de l'utilisateur (par exemple, la modification de la couleur pour simuler un bouton), puis vous aurez besoin d'un code supplémentaire attaché à l'javascript vous permettra d'invoquer sur l'étiquette, ce code supplémentaire pourrait répondre à la 'menuOption' élément à travers les DOM et en modifier la couleur.

Aussi, il n'y a pas d'autre moyen je sais que vous pouvez prendre un événement de clic, et d'y faire inscrire sur un élément en dessous d'une page visible de l'élément. J'ai essayé ce que bien cet été, et n'a trouvé aucune autre solution, mais cela.

Espérons que cette aide.

PS: Le writeup sur les événements à quirksmode est allé un long chemin pour m'aider à comprendre la façon dont les événements se comporter dans les navigateurs.

Answer 3

Donner la touche un z-index supérieur de la propriété de l'dessinée à la main image:

<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 z-index différemment de FF. Pour quelqu'un de venir avec plus de détails, vous devez enregistrer plus d'infos, un lien serait le mieux.

Answer 4

S'appuyant sur ce qui Pekka Gaiser dit, je pense que la suite va travailler. Prenant son exemple et à 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 être en mesure de placer un événement sur le sous-jacent d'une balise et, à moins que votre image a un événement, lance une capture (!IE navigateurs) et puis tue la propagation de l'événement.

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

Answer 5

Si l'image sera positionné de manière statique, vous pouvez capturer l'événement click à partir de l'image des bulles, en plaçant la balise img à l'intérieur de l'élément du menu élément.

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