0

インタラクティブな米国の地図のページがあります。各状態は、データベースの設定に基づいて交換可能なイメージです（1つの大きなイメージやイメージマップではありません）。また、divのコンテンツを変更するためのクリック可能な要素として、順序付けされていないリスト（対応する状態の上に絶対的に配置されたアイテム）を設定しています。divには、独自のdiv内のすべてのコンテンツが含まれています。表示されるdivは、「アクティブ」のクラスを持つことに基づいています。スクリプトとマークアップはここで表示できます：https ：//gist.github.com/3239999

png画像が重なっているため、画像自体が確実にクリック可能な要素になることはできませんが、可能であればリンクを指示する状態にしたかったのです。

要旨のコードはどこでも機能しますが、ニューイングランド/東海岸地域の小さな州のIEでは機能します。少しのz-index作業で解決できますが、完璧ではありません。場合によっては、まだ適切な場所をクリックする必要があります（すぐにはわかりません）。

IEに別のスクリプトを使用することはできますが、liをインジケーターとして使用してIEで機能するように変更することはできないようです。私はこれを試しましたが成功しませんでした：

<script type="text/javascript">
    $(document).ready(function() {
        switchers = $('#switchers > li');
        states = $('#state_info > div');
        switchers.each(function(idx) {
            $(this).data('state', states.eq(idx));
        }).click(function() {
             switchers.removeClass('active');
             states.removeClass('active');             
             $("#_" + $(this).attr('id')).addClass('active');  
             $("#_" + $(this).attr('id')).data('state').addClass('active');
        });
    });
</script>

特にクロスブラウザの問題のトラブルシューティングを行うために、私はjqueryに精通していません。

誰かが私がこれをより良く機能させるのを手伝ってくれる？

ここでほとんど機能しているバージョンを見ることができます：http ：//www.envisiondemo.com/lookout/state-and-federal-i-9-compliance/

実際のサイトはライブですが、テストにはデモサーバーを使用しています。IEで赤い境界線を持つようにliのスタイルを設定しました。これは、問題のある領域がどこにあるかを確認するのに役立ちます。最悪ののはウェストバージニア州とバージニア州のようです。ある角度から抱き合っているので、z-indexを変更して修正することはできません。一方は常に他方と過度に重なります。

4

1 に答える 1

0

それをSVGに切り替えることを検討しているその他のこと（あなたがかなり進んでいるように見えることを考えると、これは少し極端かもしれませんが、次のことをお勧めします：

単一の背景画像を使用して、州のすべての画像を完全に配置しないようにします。したがって、次のコードの代わりに:

<div id="states">
    <img />
    <img />
</div>

<ul id="switchers">
    <li></li>
    <li></li>
</ul>

あなただけを持つことができます：

<ul id="states">
    <li></li>
    <li></li>
</ul>

でマップを設定しますbackground-url。li最後に、状態の名前をイメージに含めるのではなく、要素に実際に追加します。これにより、ホバー時にハイライトできる可能性があります。

スクリプトは次のように改善できます。

http://jsfiddle.net/radu/4bVcd/

$(document).ready(function() {
    var $switchers = $('#switchers li'),
        $states = $('#state_info div');

    $switchers.click(function() {
        $switchers.removeClass('active');
        $states.removeClass('active');
        $(this).addClass('active');
        $('#_' + this.id).addClass('active');
    });
});

スクリプトswitchersでは、ステートメントが存在しなかっstatesたため、暗黙のグローバルでした。varjQuery オブジェクト$の前に を付けていますが、これは個人的な好みです。

あなたのコードでは、jQuery の 経由でリンクstate_infoしましたが、それを適切に使用していて、クリックするたびにエラーがスローされていたかどうかはわかりません。switchers.data()

IE6 に関する問題に関しては、WV または VA を他の東海岸の州に移動することをお勧めします。これが正常に動作するブラウザでも、それを選択するのは少し困難です。使いやすさをさらに向上させるには、前述のことを行い、ホバー時に州名を何らかの方法で強調表示することができます。色を変更したり、サイズを大きくしたり、影を追加したりできます..どの状態が選択されているかがユーザーに明確である限り、何でも構いません。</p>

于 2012-08-07T17:36:58.003 に答える