jQuery Maphilightを使用して選択されたホットスポットを強調表示し続ける -- jquery フィールド と asp.net フィールド と imagemap フィールド 関連 問題

keeping selected hotspot highlighted using jquery maphilight












1
vote

問題

日本語

maphilight でDavidユーザーがジョイントを選択できるように、スケルトン画像上に強調表示されている領域を作成するためのLynch。選択した領域が強調表示されているように選択された領域を望んでいる以外はすべてがうまく機能します。

現在私が現在行われるのは、スクリプトがこれに設定されているように、すべてのイメージマップが高かったことです。

<事前> <コード> <script> $(function () { $('.body').maphilight({ alwaysOn: true, fade: false, fillOpacity: 0.3 }); }); </script>

現在のHTMLコードの例は(座標登録解除):

<事前> <コード> <asp:ImageMap class="body" ID="ImageMap1" runat="server" ImageUrl="~/Images/body_hand_foot.jpg" HotSpotMode="PostBack" OnClick="ImageMapEventHandler"> <%-- TMJ --%> <asp:PolygonHotSpot AlternateText="Right TMJ" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Right" /> <asp:PolygonHotSpot AlternateText="Left TMJ" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Left" /> <%-- SI Joint --%> <asp:PolygonHotSpot AlternateText="Left SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Left" /> <asp:PolygonHotSpot AlternateText="Right SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Right" /> </asp:ImageMap

OnClickイベントハンドラは、PostBackValueをその他の用途のテーブルに格納

私は互いの上に2つの画像マップオブジェクトを作成し、別のMaphilight関数と異なるオプションを持つ同時に2つのホットスポットを切り替えることができますか?

またはこれへのより良いアプローチはありますか?

英語

I'm using maphilight by David Lynch to create highlighted areas on a skeleton image so that a user can select joints. Everything works fine and dandy except the user now wants the selected areas to stay highlighted.

What I currently do now is have all of the image maps highlighed so the script is set to this:

<script>     $(function () {         $('.body').maphilight({ alwaysOn: true, fade: false, fillOpacity: 0.3 });     }); </script>  

An example of current html code is (coordinates snipped out):

<asp:ImageMap class="body" ID="ImageMap1" runat="server"       ImageUrl="~/Images/body_hand_foot.jpg" HotSpotMode="PostBack"      OnClick="ImageMapEventHandler">      <%-- TMJ --%>     <asp:PolygonHotSpot AlternateText="Right TMJ"     Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Right" />     <asp:PolygonHotSpot AlternateText="Left TMJ"  Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="TMJ-Left" />      <%-- SI Joint --%>     <asp:PolygonHotSpot AlternateText="Left SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Left"  />     <asp:PolygonHotSpot AlternateText="Right SI Joint" Coordinates="..." HotSpotMode="PostBack" PostBackVAlue="SI-Joint Right" /> </asp:ImageMap 

The OnClick event handler stores the PostBackValue into a table for other uses

Is it possible I can create 2 ImageMap objects on top of each other and switch out the HotSpots between the two at the same time having another maphilight function with a different name and different options?

Or is there a better approach to this?

</div
        

回答リスト

1
 
vote
vote
ベストアンサー
 

マピライトの代替として、私のプラグインを見てください Image Mapher 。その使用方法はMaphilightに似ています。デフォルトでは、選択したときにエリアが強調表示されたままになります。

私は2つのimagemapsを使用するという質問を理解していない - これは選択問題にどのように近づくかについてのちょうどということですか?一般的に、MaphilightとImage Mapsterの両方がそれらの効果を実行するように設定されている方法は次のとおりです。

  • 背景画像をイメージマップソースと同じにしてDIVを作成する
  • 同じサイズの「キャンバス」要素を1つ以上作成します。
  • このDIVとすべてのキャンバスをオーバーレイする(ただし最後に最後にレンダリングするので、最後のzインデックスがあり、したがってマウスイベントに応答する)
  • img の不透明度= 0にするので、透明
  • です。

エフェクトは、イメージマップがマウスイベントに応答するが、<コード> canvas 要素の後ろの canvas 要素は、実際の 99887663 透明です。

だからあなたはあなたが望むように多くの「レイヤ」を持つことができます。 ImageMapsterはそれらの3つを使用します:

  • 背景画像<コード> div
  • "Highlight"エフェクト canvas
  • を表示するもの
  • 静的 "選択された"領域 canvas
  • をすべて表示するもの

...実際の img に加えて。だから私はあなたの質問への答えがイエスだと思いますが、実際には2つのイメージマップを使って2つのレイヤーを使って効果を示すことができません。これが、プラグインがシーンの背後にあるのかです。

 

Take a look at my plugin Image Mapster as an alternative to MapHilight . Its usage is similar to MapHilight. By default areas remain highlighted when selected.

I am not sure I understand the question about using two imagemaps - is this just an idea about how to approach the selection problem? Generally, the way that both MapHilight and Image Mapster set up the DOM to do their effects is as follows:

  • Create a div with a background image equal to the same as the image map source
  • Create one or more "canvas" elements of the same size
  • Overlay this div and all canvases on the image (but render the image last so it has the highest z-index, and therefore will respond to mouse events)
  • Make the img opacity = 0 so it is transparent

The effect is that the image map responds to mouse events, but the div and canvas elements behind it are all visible since the actual img is transparent.

So you can have as many "layers" as you want. ImageMapster uses three of them:

  • The background image div
  • One to show the "highlight" effect canvas
  • One to show all the static "selected" areas canvas

... in addition to the actual img. So I think the answer to your question is yes, but you don't actually want to use two image maps, just two layers to show the effects. This is how the plugin works behind the scenes.

</div
 
 
   
   
1
 
vote

jQuery&AMPには解決策があります。マピオライトのみ!

とトリックは、Maphighlightの入力属性のうち良い1つを処理しています。alwayson:

<事前> <コード> $( "#map-tag area" ).click(function(){ $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight'); //check if area wasnt already selected - otherwise gets buggy if( !$(this).hasClass('selected') ){ $('.selected').data('maphilight', { alwaysOn: false }).trigger('alwaysOn.maphilight'); $('#map-tag area').removeClass('selected'); $(this).addClass('selected'); } });

編集:あなたが最新のMaphilightを持っていることを確認してください! : http://davidlynch.org/projects/maphilight/jquery.maphilight.min。 JS 、Maphilightの公式Webページから。

 

There is a solution in jquery&maphighlight ONLY!:

And the trick is in handling good one of the maphighlight's input attributes: alwaysOn:

$( "#map-tag area" ).click(function(){     $(this).data('maphilight', {            alwaysOn: true      }).trigger('alwaysOn.maphilight');     //check if area wasnt already selected - otherwise gets buggy     if( !$(this).hasClass('selected') ){        $('.selected').data('maphilight', {           alwaysOn: false       }).trigger('alwaysOn.maphilight');       $('#map-tag area').removeClass('selected');       $(this).addClass('selected');     }  }); 

EDIT: make sure you have the latest maphilight ! : http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js , from maphilight's official webpage.

</div
 
 
 
 

関連する質問

2  Android:大画像の詳細のみを読み込んでください  ( Android load only detail of large image ) 
大きな画像を地図として使用する必要があるプロジェクトに取り組んでいます。画像は約95MBで、12100 x 8000ピクセルの解像度を持ちます。 私は一度に画像全体を必要としません、私はただ1000 x 1000ピクセルの詳細を必要としています(それは同じよ...

3  画像マップエッジ検出  ( Image map edge detection ) 
米国、または人体の解剖学像、あるいは人体の解剖学像、あるいは別の部分を持ついくつかの画像を持っていて、私は画像の白黒輪郭を持っています。 HTMLイメージマップで使用するための、個別セクションの座標を決定する最も簡単な方法? 私は退屈なコーヒーカップマップメー...

6  iPhone、Map、Clickable非矩形領域  ( Iphone map clickable non rectangular areas ) 
誰もがiPhoneで次のことをどのように実装することができるかについてのアイデアを持っていますか?私たちは米国の地図を持っています、そしてそれは異なる色の地域(気候地域、私は信じる)を持っています。それらは長方形ではなく、状態やZIPや郡や郡やその他の定義され...

0  特定の場所にある別の場所に画像を置く  ( Place an image on top of another at a specific location ) 
私のことを試みようとしていることは、ゲームのための集合ガイドの一部として対話型のコレクティブルマップを作ることです。メインイメージ(この場合のグリッド)は、ゲーム内のエリアの地図になります。地図上、グッズの場所のアイコンがあります。コレクタブルのアイコンをクリ...

0  Serverside ImageMapのためのASP.NET MVCルート  ( Asp net mvc route for serverside imagemap ) 
ASP.NET MVCビューで <input type='image'> を持っていますが、フォームが送信されたときに実行されるアクションの座標の取得方法はわかりません。要求されたURLはのように見えます <事前> /map/view/?map.x=156&...

6  DIV、背景画像、およびイメージマップ  ( Div background image and image map ) 
Webページで作成している、私は背景画像を持つDIVを持っています。私は私が頻繁に変わることになる画像の上のテキストをオーバーレイします。そのため、テキストを含むIMGタグの代わりに背景イメージと実際のテキストを使用しているのです。 背景画像にはいくつかのク...

1  jQuery Information Map  ( Jquery information map ) 
real="nofollownoreferrer">ノルウェーのウェブサイトを訪問しています。 私はJベクトルマップ、ammaps、imagemapmasterのように始まった多くのプラグインを見ました。 イメージマップマスターは私が必要とするものに最も適...

0  jQuery - RemoveClassは変動の増加とともに機能しないようです  ( Jquery removeclass doesnt seem to work along with variable increase ) 
WordPress 3.6.1でjQuery 1.10.2を使用しています。 私は5つの領域を持つイメージマップを持っています、それぞれがクラス "unclicked"を持っています。 これらの領域の1つをクリックするたびに、href属性が "#"のときに...

0  ドラッグヘルパーDIVを使用してレイヤーをドラッグし、ImageMapの外側の領域がそこにあるかのようにBaytのImageMapsを実行します。  ( Drag a layer using a drag helper div and have imagemaps in layer behave as if a ) 
項はx、y座標で格納されています。 .items divは[0,0]で始まり、<コード> .dragger (ドラッグ可能にする)の動きに基づいて再配置されます。ユーザーがドラッグ/リリースを停止するたびに、<コード> .dragger は画面の中央に位置...

0  W3C XHTML 1.0厳密に準拠したイメージマップ?  ( W3c xhtml 1 0 strict compliant image map ) 
イメージマップW3c XHTML 1.0を作るためのものはありますか? イメージマップを交換したXHTML 1.0厳密な準拠のタグはあります。マップ&gt; &lt;面積及びgt。タグ? 私はW3Cに行き、彼らの仕様を見て、私が見つけることができる唯一のも...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有