web-dev-qa-db-ja.com

オーバーレイ画像でのマウス操作を無視する

ホバー効果のあるメニューバーがあり、メニュー項目の1つの上に円と「手書き」テキストを含む透明な画像を配置します。絶対配置を使用してメニュー項目の上にオーバーレイ画像を配置すると、ユーザーはボタンをクリックできず、ホバー効果は機能しません。

このオーバーレイ画像でのマウスの操作を何らかの方法で無効にして、画像が下にある場合でもメニューが以前と同じように機能し続ける方法はありますか？

編集：

メニューはjoomlaで生成されたため、メニュー項目の1つだけを微調整することはできませんでした。そして、たとえできたとしても、JavaScriptソリューションが適切であるとは感じませんでした。そのため、最後にmenu-item要素の外側の矢印でメニュー項目を「マーク」しました。私が望んでいたほど素敵ではありませんでしたが、とにかくうまくいきました。

javascripthtmlcssxhtmljavascript-events
86
Daniel

私が見つけた最良の解決策は、CSSスタイリングです。

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

pointer-events属性は非常にうまく機能し、シンプルです。

217
DZenBot

そこで私はこれを行い、Windows XP上のFirefox 3.5で動作します。テキスト、画像オーバーレイ、すべてのクリックを遮断する透明なdivを含むボックスを表示します。

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

行ったこと：divを作成し、メニューオプションのサイズを100x40px（任意の値ですが、サンプルの説明に役立ちます）になるようにサイズを調整しました。

Divには画像オーバーレイとリンクオーバーレイがあります。リンクには、「menuOption」divと同じサイズのdivが含まれます。これにより、ユーザーのクリックがボックス全体でキャプチャされます。

テスト時には、独自の画像を提供する必要があります。 :)

警告：メニューボタンがユーザーインタラクションに応答することを期待する場合（たとえば、ボタンをシミュレートするために色を変更する場合）、タグで呼び出すjavascriptに追加のコードが必要になります。この追加のコードは、 DOMのmenuOption要素を使用して、色を変更します。

また、クリックイベントを取得し、それを表示可能なページ要素の下の要素に登録できることを知っている他の方法はありません。今年の夏にもこれを試しましたが、これ以外の解決策は見つかりませんでした。

お役に立てれば。

PS： quirksmode でのイベントに関する記事は、ブラウザーでのイベントの動作を理解するのに非常に役立ちました。

2
Mike Mytkowski

ボタンに、手描きの画像よりも高いz-indexプロパティを指定します。

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

ただし、必ずすべての主要なブラウザーでテストしてください。 IEはFFとは異なる方法でz-indexを解釈します。誰かが詳細を思い付くには、さらに情報を投稿する必要があります。リンクが最適です。

1
Pekka 웃

ペッカガイザーが言ったことに基づいて、次のことがうまくいくと思います。彼の例を取り上げて、作り直します。

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

ここで、基礎となるa-tagにイベントを配置し、イメージにイベントがない限り、キャプチャを開始し（！IEブラウザー）、イベントの伝播を強制終了できます。

さらにサポートが必要な場合は、状況についてもう少しお知らせください。

0
jeremyosborne

画像を静的に配置する場合は、メニュー項目要素内にimgタグを配置することにより、画像のバブル発生時にクリックイベントをキャプチャできます。

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