web-dev-qa-db-fra.com

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

J'ai une barre de menus avec des effets de survol, et maintenant je veux placer une image transparente avec un cercle et un texte "dessinée à la main" sur l'un des éléments de menu. Si j'utilise le positionnement absolu pour placer l'image de surimpression 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 superposée afin que le menu continue à fonctionner comme avant, même s’il se trouve sous une image?

Modifier:

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 le 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 en dehors de l'élément d'élément de menu. Pas aussi bien que je l'aurais voulu, mais ça a fonctionné quand même.

javascripthtmlcssxhtmljavascript-events
83
Daniel

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

L'attribut pointer-events fonctionne très bien et est simple.

213
DZenBot

Donc, je l'ai fait 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 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éé une div et je l'ai dimensionnée de manière à ce qu'une option de menu puisse être dimensionnée à, 100x40px (une valeur arbitraire, mais cela aide à illustrer l'exemple).

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

Vous devrez fournir votre propre image lors des tests. :)

Avertissement: Si vous attendez que votre bouton de menu réponde à l’interaction de l’utilisateur (par exemple, changer de couleur pour simuler un bouton), vous aurez besoin de code supplémentaire associé au javascript que vous invoquerez sur le tag, ce code supplémentaire pourrait adressez l'élément 'menuOption' à travers le DOM et changez sa couleur.

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

J'espère que cela t'aides.

PS: La description des événements dans quirksmode m'a beaucoup aidé à comprendre le comportement des événements dans les navigateurs.

2
Mike Mytkowski

Attribuez au bouton une propriété z-index supérieure à celle de 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 z-index différemment de FF . Pour obtenir plus de détails, vous devez poster plus d'informations, un lien serait préférable.

1
Pekka 웃

En me basant sur ce que Pekka Gaiser a dit, je pense que ce qui suit fonctionnera. Prenant son exemple et le retravaillant:

<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 l'a-tag sous-jacent et, sauf si votre image en a un, initialiser une capture (navigateurs! IE) puis tuer 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.

0
jeremyosborne

Si l'image est positionnée de manière statique, vous pouvez capturer l'événement click de l'image au fur et à mesure de son apparition en plaçant la balise img dans l'élément de l'élément de menu.

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