4

画像にさまざまなリンクを含むメインコントロールページを作成していますが、唯一の問題は、画像をページ全体に合わせてサイズを変更し(ウィンドウをある程度)縮小して拡大することです。

<img src ="image/main.jpg" style="width:100%;height:100%; min-width:600px; min-height:400px;" alt="Main" usemap="#MainMap">

<map name="MainMap">
<area id="login" class="login" shape="circle" coords="91,677,92">
<area id="money_management" class="money" shape="circle" coords="598,680,92">
<area id="withdraw_history" shape="circle" coords="596,304,67">
<area id="transaction_history" shape="circle" coords="784,624,67" href="History.html">
<area id="cart" shape="circle" coords="396,698,67,92">
<area id="buy" shape="circle" coords="898,352,92">
<area id="sell" shape="circle" coords="718,438,92">
<area id="new" shape="circle" coords="570,132,92" href="New.html">
</map>

以前、画像を静的にして別の作業をするために残したときにこれがありました。ウィンドウのサイズを変更した後に座標を更新したかったのですが、jquery でサイズ変更を検出する方法を知っています。構文が見つかりません。座標の更新の例。

4

3 に答える 3

6

これは、あなたが望んでいたことを正確に実行する優れた jQuery PlugIn です。

レスポンシブ イメージ マップ jQuery プラグイン

/*    
* rwdImageMaps jQuery plugin v1.4    
*    
* Allows image maps to be used in a responsive design by recalculating 
* the area coordinates to match the actual image size on load and 
* window.resize     
*    
* Copyright (c) 2012 Matt Stow    
* https://github.com/stowball/jQuery-rwdImageMaps    
* http://mattstow.com    
* Licensed  under the MIT license
*/

それが役立つことを願っています

于 2012-12-03T08:18:07.883 に答える
3

David Bradshaw は、この問題を解決する素敵な小さなライブラリを作成しました。jQuery の有無にかかわらず使用できます。

ここから入手可能: https://github.com/davidjbradshaw/imagemap-resizer

于 2014-02-28T20:03:45.623 に答える
0

結局、画像マップをスクレイピングし、代わりに絶対ハイパーリンクを使用して分割を使用し、分割に基づいてサイズを変更しました。それを避けたかったのですが、何がうまくいくかを推測してください。

于 2012-10-31T23:02:14.590 に答える