0

私はウェブサイトを作っています。さまざまなアクションにjqueryを使用しています。

背景画像には中央のバルーンがあります。背景画像の上に、4つの異なる画像を配置しました。これらも風船の形をしています。誰かがこれらの小さなバルーンをクリックすると、特定のjqueryアクションを実行します。ここで、中央のバルーンの外側と小さなバルーン以外の背景画像をクリックした場合に、jqueryスクリプトをトリガーしたいと思います。

このクリック可能な領域を選択する方法に固執しています。私が検索したインターネット上の至る所で、彼らは長方形のクリック可能な領域を作るように言った。これは私が必要とするものではありません。私は自分の目的を達成するために多くのマイクロ長方形を使用することができますが、これは非常に大雑把な方法です。

誰かがこれのためのいくつかのエレガントな方法を教えてもらえますか？質問を詳しく説明する画像を添付します。

どうもありがとう

ここに画像の説明を入力してください

4

3 に答える 3

3

このようにすることをお勧めします：

  1. Inkscapeを使用してイメージ マップを作成します。このツールを使用すると、クリック可能にする (またはmouseoverなどの他のイベントに反応する) 画像の領域を視覚的に選択できます。これを行うと、HTML ページにコピーして貼り付けるだけでよい座標を持つタグが生成されます。
  2. click、mouseover、mouseout、およびその他のイベントを特定の領域にバインドし、それに応じてアクションを実行できるようにするmaphilight jquery プラグインをダウンロードします。

クリック イベントを 4 つのバルーンすべてにバインドすると、適切に機能します。吹き出し以外の背景のクリックに関する他の部分については、画像全体にクリックハンドラーをバインドし、クリックしたら event.target が吹き出しかどうかを確認します。バルーンでない場合は、ユーザーがバルーンの外側の背景をクリックしました。

于 2012-12-31T13:45:28.687 に答える
1

画像マップを使用します。これはHTML標準の一部です。画像マップを簡単に作成するための無料のオンラインツールはたくさんありますが、Googleだけです。私の個人的なお気に入りはこれです。

<area>その後、通常どおりイベントをタグにバインドできます。maphilight jQueryプラグインは、ホバー状態に優れたタッチを追加します。

参考文献：

于 2012-12-31T13:48:31.160 に答える
0

バルーン画像にいくつかの共通クラス (lets balloonImg) を与えます。jquery を使用すると、このように html でクリック イベントを実行できます。

var htmlClickFun=function(e){
    if(!$(e.target).is('.balloonImg')){
   //your code
};

$('html').click(htmlClickFun);

ただし、html と body にイベントを追加することはお勧めできません。そのため、イベントを HTML 全体に追加する場合は、$('html').unbind('click',htmlClickFun); 不要なときにバインドを解除する必要があります。

http://jsfiddle.net/tAhV2/で確認してください

于 2012-12-31T17:45:58.403 に答える