0

一連の領域がマップされた画像があります。各領域をクリックすると、関数が呼び出されて何かが実行されます。この試練全体が IE7 でうまく機能します。一度、私を悩ませているのは Chrome です。Chrome はこれらの領域でイベントを発生させず、問題を特定できません。関連するコードは次のとおりです。

<div id="containerRemote">
<img src="resources/buttons/RC64_small.png" width="170" height="590"
alt="" usemap="#remotemap" />
<map id="remotemap" name="remotemap">
    <area shape="circle" coords="37,47.5,12" alt="TV Input" />
    <area shape="circle" id="format" coords="37,78.5,12.5" alt="Format" />
    <area shape="circle" coords="85.5,60.5,13" alt="Power" />
    <area shape="circle" id="poweron" coords="140.5,50.5,12.5" alt="DTV Power On" />
    <area shape="circle" id="poweroff" coords="140.5,79.5,12" alt="DTV Power Off" />
    <area shape="circle" id="play" coords="87.5,134,17" alt="Play" />
    <area shape="circle" id="stop" coords="87.5,95.5,13" alt="Stop" />
    <area shape="circle" id="rewind" coords="43,134,14" alt="Rewind" />
    <area shape="circle" id="fastforward" coords="133.5,134,14" alt="Fast Forward" />
    <area shape="circle" id="pause" coords="61.5,164.5,13" alt="Pause" />
    <area shape="circle" id="record" coords="116,162.5,13" alt="Record" />
    <area shape="circle" id="replay" coords="61.5,101.5,13" alt="Replay" />
    <area shape="circle" id="advance" coords="116,105,13" alt="Advance" />
    <area shape="circle" id="guide" coords="40.5,205.5,15" alt="Guide" />
    <area shape="circle" id="active" coords="68.5,187.5,17" alt="Active" />
    <area shape="circle" id="list" coords="106.5,187.5,14" alt="List" />
    <area shape="circle" id="exit" coords="133.5,209,15" alt="Exit" />
    <area shape="circle" id="select" coords="89,243.5,18" alt="Select" />
    <area shape="circle" id="up" coords="89,209,12.5" alt="Up" />
    <area shape="circle" id="up2" coords="73.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="up3" coords="104.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="down" coords="89,279,12.5" alt="Down" />
    <area shape="circle" id="down2" coords="73.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="down3" coords="104.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="left" coords="53.5,243.5,12.5" alt="Left" />
    <area shape="circle" id="left2" coords="56,224.5,12.5" alt="Left" />
    <area shape="circle" id="left3" coords="53.5,257,12.5" alt="Left" />
    <area shape="circle" id="right" coords="122.5,243.5,12.5" alt="Right" />
    <area shape="circle" id="right2" coords="121,224.5,12.5" alt="Right" />
    <area shape="circle" id="right3" coords="119.5,257,12.5" alt="Right" />
    <area shape="circle" id="back" coords="40.5,288,15" alt="Back" />
    <area shape="circle" id="menu" coords="86.5,305,17" alt="Menu" />
    <area shape="circle" id="info" coords="133.5,290,15" alt="Info" />
    <area shape="circle" id="red" coords="45,320,12" alt="Red" />
    <area shape="circle" id="green" coords="70.5,334.5,12" alt="Green" />
    <area shape="circle" id="yellow" coords="100,334.5,12" alt="Yellow" />
    <area shape="circle" id="blue" coords="125,320,12" alt="Blue" />
    <area shape="circle" coords="47,356,15" alt="Volume Plus" />
    <area shape="circle" coords="51,399.5,14" alt="Volume Minus" />
    <area shape="circle" coords="49,428.5,12" alt="Mute" />
    <area shape="circle" id="channelup" coords="130.5, 356.5,15" alt="Channel Plus" />
    <area shape="circle" id="channeldown" coords="127.5,399,14" alt="Channel Minus" />
    <area shape="circle" id="previous" coords="126.5,428.5,12" alt="Previous Channel" />
    <area shape="circle" id="one" coords="49,456.5,12" alt="One" />
    <area shape="circle" id="two" coords="87.5,456.5,12" alt="Two" />
    <area shape="circle" id="three" coords="125,456.5,12" alt="Three" />
    <area shape="circle" id="four" coords="49,486.5,12" alt="Four" />
    <area shape="circle" id="five" coords="87.5,486.5,12" alt="Five" />
    <area shape="circle" id="six" coords="125,486.5,12" alt="Six" />
    <area shape="circle" id="seven" coords="49,513.5,12" alt="Seven" />
    <area shape="circle" id="eight" coords="87.5,513.5,12" alt="Eight" />
    <area shape="circle" id="nine" coords="125,513.5,12" alt="Nine" />
    <area shape="circle" id="dash" coords="49,539.5,12" alt="Dash" />
    <area shape="circle" id="zero" coords="87.5,539.5,12" alt="Zero" />
    <area shape="circle" id="enter" coords="125,539.5,12" alt="Enter" />
</map>
</div>

マップ エリアのこの膨大なリストであなたを怒らせるのは好きではありませんが、マップ内に私が見逃しているエラーがある可能性があります。関数呼び出しをこれらの領域の onclick イベントにバインドする JS を次に示します。以下は、href 属性を各エリア マッピングに割り当てる、追加した JQuery コードの一部でもあります。

    $("#remotemap area").click(function() {
    if($(this).attr("id") != undefined) {
        logRCCommand($(this).attr("id"));
    }
    return false;
});

    $("#remotemap area").attr("href", "javascript: void(0);");

CSS:

#containerRemote{
position: absolute; /* this line, when commented, fixes the problem, but ruins layout         */
width: 170px; 
}

興味深いことに、画像の一番下に 3 つの領域がありますが、サイズは正しくありません。これにより、構文エラーや論理エラーではなく、何らかのフォーマット エラーがあると思われます。それでも、何が原因なのかわかりません。インターネットで手がかりを探しましたが、役に立ちませんでした。

ありがとう

更新: この問題は CSS に関係していると思います。このマップが含まれている div の CSS の特定の行をコメントアウトしました。出来上がり！すべてが正常に機能しますが、ページ全体のレイアウトが地獄に落ちました。これが新しい質問なのか、現在の質問の単なる更新なのかわかりません。いずれにせよ、コードを更新して、さらに関連性の高い行を含めました。

4

2 に答える 2

0

すべての area 要素に href 属性を追加する必要があります

<area shape="circle" coords="37,47.5,12" alt="TV Input" href="#" />
于 2012-07-03T17:30:56.560 に答える
0

ロドルフォさんのコメントのおかげで、イメージ マップに隣接する別の div ADJACENT が思ったよりも広く、その一部 (コンテンツがなく、その部分が見えなくなっている部分) がイメージ マップを覆っていたことがわかりました。 divでカバーされていないごく一部を除いて、実際には使用できなくなります。

他のdivがどのように広くなったのかわかりませんが、それは後で時間があるときに理解することです:P

とにかく、イメージ マップを含む div の z-index を変更しました

#containerRemote {
  position: absolute;
  width: 170px;
  z-index: 11;
}

すべてが正常に動作するようになりました！私の問題は、Chrome がイベントを発生させなかったことではなく、Chrome のコンテンツのレイアウトと IE7 のレイアウトの違いでした。

みんな助けてくれてありがとう！

于 2012-07-05T12:37:41.070 に答える