0

イメージ マップを作成するために、イメージの特定の部分がエリア タグで区切られた大きな背景写真があります。

イメージ マップの最初の部分は次のとおりです。

<img id="mainbkgrnd" src="./images/everythingistemporary2.jpg" width="100%" 
            height="auto" alt="Home" usemap="#homemap">
    <map name="homemap">
        <area class="areamap" id="map_comments" shape="rect" 
        coords="880,140,1000,360" href="comments.php" alt="Comments"/>

ユーザーが線で区切られた領域にカーソルを合わせると、対応するテキスト ラベルが画像の右上の div に表示されます。そのdivのコードは次のとおりです。

</map> 
<div id="pagename"></div>

ラベルを表示するjqueryは次のとおりです。

$(function() {
    $('area').hover( 
        function(event) {
            var area = this.id.split('map_')[1];
            if (area == 'comments') {
                pn.css('left',1100);
                pn.html('Comments');
            }else if (area == 'shorts') {
                pn.css('left',1100);
                pn.html('Shorts');

問題は、さまざまなサイズのモニターで、線引きされた領域が目的の場所と一致しなくなり、動き回ることです。ラベルが表示される div も同様です。

これを修正する最善の方法は何ですか?

また、Internet Explorer では、div にラベルがまったく表示されません。理由はありますか？

4

1 に答える 1

1

ちんぷんかんぷん、

ImageMapster jQuery プラグインを試してみてください。これは、イメージ マップに作用して (v1.2.6 で) 次の機能を提供します。

  • 領域を強調表示して選択する
  • 代替画像を使用したクールなエフェクト
  • イメージ マップを外部リストにバインドする
  • エリアまたはエリア グループのフローティング ツールチップを表示する
  • 複雑な機能を作成するためのグループ化および除外マスク
  • アクティブな状態であっても、イメージマップを任意の表示サイズに自動スケーリング

必要な機能は、リストの最後にある機能です。

私は ImageMapster を自分で使用したことはありませんが、デモは非常に印象的で、適切に作成されたプラグインであることを示しています。

于 2012-10-31T23:09:52.670 に答える