jquery - 画像マッピングの奇数

Question

これはトリッキーなもので、これらの画像マップがどのように機能するかについての知識が不足していると感じます。ともかく..

ここに表示される問題http://luff.redlinestaging.com/index.php?option=com_content&view=article&id=35

JSコード：

jQuery(document).ready( function() {
    jQuery.get('map.php?country=canada', function(output) {
        jQuery('#map').html( output );
        addClickMap();
    });
}); 

function showState(e) {
    //console.log( jQuery(this).is(':hidden' ) );
    var title = jQuery(this).attr( 'title' );
    var stateClass = '.' + title;
    jQuery(stateClass).addClass( 'hover' );
}

function hideState(e) {
    //console.log( jQuery(this).is(':hidden' ) );
    var title = jQuery(this).attr( 'title' );
    var stateClass = '.' + title;
    jQuery(stateClass).removeClass( 'hover' );
}

function addClickMap() {
    if( jQuery('#canada') ) {       
        jQuery('#canada area').each( function() {
            //jQuery(this).hoverIntent( showState, hideNav );
            jQuery(this).mouseenter( showState );
            jQuery(this).mouseleave( hideState );
            jQuery(this).click( function( e ) {
                e.preventDefault();
            });
        });
    }
}

CSSコード：

#map {
    width:100%;
}

.map {
    width:100%;
    height:100%;
    position:relative;
}

area {
    position:absolute;
    top:0px;
    left:0px;
    z-index: 1001;
    display:block;
    visibility:visible;
}

.canada {
    background-image:url(/map/map_canada.png);
    background-repeat:no-repeat;
}

.hover {
    display:block !important;
}   

.state {
    position:absolute;
    z-index:2;
    top:0px;
    left:0px;
    display:none;
}

.AB {
    top:375px;
    left:342px; 
}

.BC {
    top: 308px;
    left: 236px;
}

.SK {
    top: 394px;
    left: 406px;
}

.NB {
    top: 550px;
    left: 784px;
}

.MB {
    top: 405px;
    left: 486px;
}

.NT {
    top:198px;
    left: 321px; 
}

.NL {
    top: 380px; 
    left: 765px;
}  

.NU {
    top:-4px;
    left: 397px;
} 

.ON {
    top: 456px;
    left: 535px;
} 

.PE { 
    top: 532px;
    left: 820px;
}

.NS {
    top: 551px;
    left: 811px;
}

.QC {
    top: 364px; 
    left: 655px;
}

.YT {
    top:180px;
    left:243px;
}

Generated HTML dump from PHP for Canada:



    <div class="map canada"> 
        <img src="/map/map_canada.png" usemap="#canada" class="map_canada"/>
                <div class="state AB" style="background-image:url(/map/icons/AB.png); width:107px; height:182px; background-repeat:no-repeat;">
        </div>
            <div class="state BC" style="background-image:url(/map/icons/BC.png); width:143px; height:239px; background-repeat:no-repeat;">
        </div>
            <div class="state MB" style="background-image:url(/map/icons/MB.png); width:112px; height:170px; background-repeat:no-repeat;">
        </div>
            <div class="state NB" style="background-image:url(/map/icons/NB.png); width:56px; height:55px; background-repeat:no-repeat;">
        </div>
            <div class="state NL" style="background-image:url(/map/icons/NL.png); width:170px; height:164px; background-repeat:no-repeat;">
        </div>
            <div class="state NT" style="background-image:url(/map/icons/NT.png); width:189px; height:218px; background-repeat:no-repeat;">
        </div>
            <div class="state NS" style="background-image:url(/map/icons/NS.png); width:83px; height:68px; background-repeat:no-repeat;">
        </div>
            <div class="state NU" style="background-image:url(/map/icons/NU.png); width:372px; height:425px; background-repeat:no-repeat;">
        </div>
            <div class="state ON" style="background-image:url(/map/icons/ON.png); width:207px; height:217px; background-repeat:no-repeat;">
        </div>
            <div class="state PE" style="background-image:url(/map/icons/PE.png); width:39px; height:42px; background-repeat:no-repeat;">
        </div>
            <div class="state QC" style="background-image:url(/map/icons/QC.png); width:216px; height:259px; background-repeat:no-repeat;">
        </div>
            <div class="state SK" style="background-image:url(/map/icons/SK.png); width:97px; height:176px; background-repeat:no-repeat;">
        </div>
            <div class="state YT" style="background-image:url(/map/icons/YT.png); width:118px; height:189px; background-repeat:no-repeat;">
        </div>
        </div>
    <map id="canada" name="canada">
        <area shape="poly" coords="410,552,446,401,500,413,485,568," href="#" title="SK" />
        <area shape="poly" coords="488,568,503,413,552,419,596,463,545,519,542,572," href="#" alt="" title="MB" />
        <area shape="poly" coords="597,466,548,524,546,569,590,589,608,575,641,599,687,629,666,668,700,651,738,619,673,642,691,602,686,589,680,535,655,515,653,485,627,481," href="#" alt="" title="ON" />
    </map>

ご覧のとおり、マウスオーバーは正常ですが、mouseoutイベントをearlyに呼び出すか、mouseleaveイベントをearlyに呼び出します（どちらも機能しません）。時々あまり反応しませんが、それは私が本当に気にかけている問題とは別の問題です。マウスが動いている間、マウスオーバーとマウスアウトの両方のイベントが次々と発生するということです。これをそれほど厄介にしない方法はありますか？

これができない場合、あなたが考えている前進するための最良の方法は何ですか？a）設計を簡素化し、maphilightを使用しますb）マウスの位置に基づいてマウスのオーバーを検出する非常に複雑な関数を記述しますか？将来的には、カスタム画像デザインを各州/州に配置したいと思うかもしれません。そのため、完全な画像表示が望ましいです。

score 2 · Accepted Answer

関数にブレークポイントを設定し、hideState次のプロパティを確認しました。

e.target
e.relatedTarget

1つ目は、イベントをトリガーした要素です。予想通り、これがそのエリアでした。マウスの出入りイベントの場合、2番目はマウスが移動した領域です。この場合は次のとおりです。

<div class="state SK hover" 
    style="background-image:url(/map/icons/SK.png); 
     width:97px; height:176px; background-repeat:no-repeat;">
</div>

したがって、一連の長方形のDIVが画像マップの上にオーバーレイされます。DIVを表示すると、マウスと同じ領域で、それが最上位のレイヤーになります。したがって、マウスはを出てarea入り、div問題の原因になります。

この問題を解決するには、イメージマップが常に最上位のレイヤーであることを確認する必要がありますが、それでもdiv要素を見ることができます。これを行うには、画像のコピーを作成し、画像マップを透明にします（ただし、divよりも高いz-indexを使用します）。基本的に、3つのレイヤーがあります。一番下のレイヤーは表示画像です。2つ目はdiv要素で、一番上はイメージマップです（ただし完全に透明です）。マークアップは次のようになります。

    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        class="map_canada" 
        style="position: absolute; left: 0; top: 0">

    <img src="http://luff.redlinestaging.com/map/map_canada.png" 
        usemap="#canada" 
        class="map_canada" 
        style="z-index: 1000; opacity: 0; position: absolute; left: 0; top: 0;">

position: absolute2つの画像を重ね合わせるために必要です。最初のものにはイメージマップがないことに気付くでしょう。必要ありません。これは表示用です。これは、表示できる背景画像です。2つ目はイメージマップですが、これopacity:0を非z-index:1000表示にし、マウスオーバーイベントの結果として後でdivを追加した場合でも、常に一番上に表示されるようにします。したがって、イメージマップは依然として最高の優先度を持ちますが、実際のイメージまたはその背後にレンダリングされるdivを隠しません。

実例：

http://jsfiddle.net/eZTV3/

別の方法は、jqueryプラグインであるImageMapsterを使用して、各領域の代替画像を管理する必要なしにこれを行うことです。つまり、単一の代替画像を提供することができ、それぞれの領域からのデータを使用してハイライトを塗りつぶします。Webサイトの最初のデモはこれを示しています。

score 1 · Accepted Answer

SKに以下を追加しました。

.SK:hover {
    display:block !important;
    background-image:url("http://luff.redlinestaging.com/map/icons/SK.png"); 
    width:97px; 
    height:176px; 
    background-repeat:no-repeat;
}

私のサンプルを見ると、SKにはこの問題がないことがわかります。

http://jsfiddle.net/webwarrior/d2nNN/10/

私はまだ理由を理解しようとしています...

CSSホバーで十分になる可能性がありますが、読み込みに時間がかかる可能性があります。Javascriptを削除しようとすると、CSSホバーは何もしませんでした。

ここでは、「オン」状態もうまく機能しています。

http://jsfiddle.net/webwarrior/d2nNN/13/

hth。

jquery - 画像マッピングの奇数

2 に答える 2

Related

Reference