4

私は現在、さまざまな解像度で動作するように構築しているサイトを取得しようとして、大きな頭痛の種になっています。主なナビゲーションは、ほとんどのビューポートを埋める必要があるイメージ マップによるものです。私はこれが完全に時代遅れであることを知っていますが、イメージ マップは、ポリゴン領域の区切りを許可する唯一の非 Flash ソリューションのようです。

最終的に、サイトのサイズを変更して、条件付きの jQuery と CSS を使用してメイン画像を小さなモニターに表示できるようにしましたが、スリックボックス内のテキストのサイズも変更されてしまい、見栄えが悪くなります。

サイト (ほとんど未完成) はこちらです。ナビゲーションがまだ完全に明確ではないことはわかっていますが (ペンキの色にカーソルを合わせてクリックします)、まずこの問題を整理したいと思います。

要約すると、私の質問：

  1. イメージ マップを使用せずに、この多角形のホットスポット ロールオーバー イメージを作成する別の方法はありますか?
  2. テキストを同じサイズに保ちながら、イメージマップとオーバーレイされたスリックボックスのサイズを変更する方法はありますか?

どうもありがとうございました - この週末ずっと髪を引っ張っていました!

4

3 に答える 3

2

編集:パーセント アプローチは機能しません。

その場合、私が見ることができる唯一のものは次のようになります:

パーセント表記を使用して形状を持つ：

 <area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">

最初の描画時とすべてのウィンドウのサイズ変更時:

  • mycoords各エリアのプロパティを 解析する

  • パーセンテージを 4 つの整数に分割する

  • .width()画像のプロパティに基づいてパーセンテージを計算します

  • coordsこのように計算されたピクセル値に基づいて領域のプロパティを設定します

完全に簡単というわけではありませんが、経験豊富な jQueryist が実装するのは半分ほど簡単です。

古い答え:

うーん。動的にサイズ変更する必要があるイメージマップがありますか?

私はこれを自分で試したことはありませんが、相対座標を使用するのはどうですか=

 <area shape="rect" coords="1%,3%,25%,29%">

これが機能するかどうかはわかりませんが、試してみる価値があります。

于 2010-11-09T19:17:25.707 に答える
1

少し制限がありますが、HTML/CSSで不規則な形を作ることができます。

離れたリスト

CSSPlay

それらの1つを目的に適合させることができるはずです。

編集：

画像のサイズ変更に関しては、CSSでピクセル単位でハードコーディングするのではなく、相対的な幅を使用する必要があります

実際、その多くをすでに処理している可能性のある柔軟なフレームワークがあります 。CSSグリッドを確認してください。

于 2010-11-09T19:42:45.153 に答える
0

流動的なデザインのホットスポットのもう 1 つの回避策は、Edge Animate でリンクを使用してレスポンシブな静的イメージを作成することです。ホットスポット (またはホットスポットとして機能するレイヤー) は完全に応答します。欠点は、50kb のイメージが Edge から出力されると約 120kb になることです。とは言っても、かなり迅速な回避策です。

于 2015-04-17T04:18:57.617 に答える