0

さまざまな Web ページへのリンクがあるナビゲーション バーに使用している JPEG 上のマップ エリアがあります。

<div id="container">
<img src="home.jpg" usemap="#imagemap" id="main-nav" style="max-width:100%;" />
<map name="imagemap">
<area shape="circle" coords="93,225,83" href="home.html" id="home">
<area shape="circle" coords="287,226,83" href="about.html" id="about"/>
<area shape="circle" coords="685,224,84" href="gallery.html" id="gallery" />
<area shape="circle" coords="876,226,87" href="facilities.html" id="facilities"/>
<area shape="rect" coords="-2,-8,1095,106" href="home.html" />
</map>
</div>

ナビゲーション画像が「コンテナ」div (幅 75%) に収まるようにするために、最大幅を 100% に設定しました (これで希望どおりになります)。しかし、これはサイトをロードするときの問題です。解像度が異なると、マップ エリアの位置とサイズがずれます。

それを回避する方法はありますか？IE7+で動作するソリューションが望ましいですが、何でも良いでしょう。

乾杯！

4

1 に答える 1

0

home.jpg を 5 つの部分にスライスするか、jQuery を使用して Web サイトの幅に応じて領域の適切な座標を設定することをお勧めします。

例えば

var winWidht = $(window).width(); //detect widht of window
$('#home').attr('coords',winWidth/5 + ',' + 225 + ',' + winWidth/6); //set coord X and radius of your circle

たとえば、基本的な数学の変更を作成するだけです。それで少し遊ぶ必要があります:)ホームを置き換えることで他の座標を設定できます

于 2013-04-27T21:52:10.810 に答える