Ignora l'interazione del mouse sull'immagine sovrapposta

Ho una barra dei menu con effetti al passaggio del mouse e ora voglio posizionare un'immagine trasparente con un cerchio e un testo "disegnato a mano" su una delle voci di menu. Se utilizzo il posizionamento assoluto per posizionare l'immagine sovrapposta sopra la voce di menu, l'utente non sarà in grado di fare clic sul pulsante e l'effetto al passaggio del mouse non funzionerà.

C'è un modo per disabilitare in qualche modo l'interazione del mouse con questa immagine sovrapposta in modo che il menu continui a funzionare come prima anche se è sotto un'immagine?

Modificare:

Poiché il menu è stato generato con Joomla, non ho potuto modificare solo una delle voci di menu. E anche se potessi, non pensavo che una soluzione JavaScript fosse appropriata. Quindi alla fine ho "contrassegnato" la voce di menu con una freccia fuori dall'elemento di voce di menu. Non così bello come avrei voluto che fosse, ma comunque ha funzionato bene.

La migliore soluzione che ho trovato è con CSS Styling:

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

pointer-events l'attributo funziona abbastanza bene ed è semplice.

Quindi l'ho fatto e funziona in Firefox 3.5 su Windows XP. Mostra una casella con del testo, un'immagine sovrapposta e un div trasparente sopra che intercetta tutti i clic.

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

Cosa ho fatto: ho creato un div e l'ho dimensionato in modo che corrisponda a ciò che un'opzione di menu potrebbe essere dimensionata, 100x40px (un valore arbitrario, ma aiuta a illustrare il campione).

Il div ha una sovrapposizione di immagini e una sovrapposizione di link. Il collegamento contiene un div dimensionato per essere uguale al div "menuOption". In questo modo un clic dell'utente viene catturato nell'intera casella.

Dovrai fornire la tua immagine durante il test. :)

Avvertenza: se ti aspetti che il tuo pulsante menu risponda all'interazione dell'utente (ad esempio, cambiando colore per simulare un pulsante), allora avrai bisogno di un codice aggiuntivo allegato al javascript che richiamerai sul tag, questo codice aggiuntivo potrebbe indirizzare il ' menuOption 'tramite il DOM e cambiarne il colore.

Inoltre, non c'è altro modo che io sappia che puoi prendere un evento click e farlo registrare su un elemento sotto un elemento di pagina visibile. Ho provato anche questo questa estate e non ho trovato altra soluzione se non questa.

Spero che questo ti aiuti.

PS: Il resoconto sugli eventi a quirksmode è stato molto utile per aiutarmi a capire come si comportano gli eventi nei browser.

Assegna al pulsante una proprietà z-index più alta rispetto all'immagine disegnata a mano:

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

tuttavia, assicurati di testarlo in tutti i principali browser. IE interpreta lo z-index in modo diverso da FF. Affinché qualcuno fornisca maggiori dettagli, dovresti pubblicare più informazioni, un collegamento sarebbe meglio.

Basandosi su ciò che ha detto Pekka Gaiser, penso che quanto segue funzionerà. Prendendo il suo esempio e rielaborandolo:

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

Qui dovresti essere in grado di posizionare un evento sull'a-tag sottostante e, a meno che la tua immagine non abbia un evento, avvia un'acquisizione (! Browser IE) e quindi interrompe la propagazione dell'evento.

Se hai bisogno di un po 'più di aiuto, facci sapere un po' di più sulla situazione.

Se l'immagine verrà posizionata staticamente, è possibile catturare l'evento clic dall'immagine mentre bolle, posizionando il tag img all'interno dell'elemento della voce di menu.

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