1

さまざまな JavaScript 機能を実行するポイントをユーザーが選択できるように、画像の上にエリア マップを使用しています。

形状の座標は html ページにハード コードされています。これにより、スクリプトをさまざまなページで動作させることができます。残念ながら、ページをさまざまな解像度で動作させる必要があります。これには、親 Div のパーセンテージとしての画像スケールも必要です (これについては回避策はありません。顧客の要件です)。

エリアマップは座標を使用し、パーセンテージはまだサポートされていないため、これに対する最善のアプローチはどうあるべきか疑問に思っていましたか?

私が考えることができる唯一のオプションは次のとおりです。

  1. html に基づいて各ポイントの Div を作成し、それらを % 配置します
  2. 座標を JavaScript に渡し、現在の画面サイズに基づいて % を算出し、座標に変換します。
  3. インターウェブに尋ねて、誰かがこれに遭遇し、天才的な解決策を見つけたことを祈ってください:)
4

1 に答える 1

2

ページの読み込み時と window.resize 時に JavaScript で座標の再計算を行うことができます。jQuerywidth()とheight()関数を使用すると、現在の画像サイズを取得し、それを親の幅と高さで割り、divこれらの係数を画像マップ座標に適用できます。

それが基本的にこのjQueryプラグインの機能だと思います（テストされていません！）： http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

もう 1 つの解決策は、CSS 変換を使用することです (従来のブラウザーのサポートを気にしない場合 ;-))。現在の document.width() および document.height() の値を確認してから、スケール値をimgおよびmapタグに適用できます。

于 2013-05-07T12:47:25.207 に答える