1

私の JS フィドル: http://jsfiddle.net/j6cAu/

HTML:

            <div style="text-align:center; width:330px; margin-left:auto; margin-right:auto;">
                <img id="Image-Maps_8201306061020497" src="http://www.interfaithmedical.com/skillsets_bw.png" usemap="#Image-Maps_8201306061020497" border="0" width="330" height="330" alt="" />
                <map id="_Image-Maps_8201306061020497" name="Image-Maps_8201306061020497">
                    <area shape="poly" coords="172,165,311,120,325,100,313,102,299,78,280,52,259,37,242,27,222,18,189,12,173,12,171,89,172,154," href="http://www.pz.com" alt="CSS" title="CSS"   />
                    <area shape="poly" coords="174,172,260,288,281,297,274,288,301,259,320,224,327,189,328,159,320,125,249,149," href="http://www.pz.com" alt="JQuery" title="JQuery"   />
                    <area shape="poly" coords="169,179,258,300,225,319,184,328,150,328,106,321,90,309,79,318,83,293,123,236,165,180," href="http://www.pz.com" alt="HTML" title="HTML"   />
                    <area shape="poly" coords="161,173,71,294,42,270,22,237,11,200,9,164,14,139,4,134,21,128,72,145,149,169," href="http://www.pz.com" alt="GFX" title="GFX"   />
                    <area shape="poly" coords="164,165,19,118,35,80,60,50,97,28,150,13,150,2,164,20,163,123," href="http://www.pz.com" alt="PHP" title="PHP"   />
                </map>
            </div>
<img src="http://www.interfaithmedical.com/skillsets.png" />

私がやろうとしているのは、ユーザーのマウスオーバー アクションに基づいて画像の一部を変更することです。たとえば、ユーザーがマウスを CSS の上に置くと、カラー画像の CSS 部分がフェードインし、白黒がフェードアウトし、マウスアウトするとカラー画像がフェードアウトし、白黒画像がフェードインするとします。それは可能ですか?

私の推測では、白黒の画像を色の上に直接置き、JQuery を使用してスワップを完了しますか?

解決策:

<HEAD>
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
</HEAD>

<BODY
                <img id="circle" src="theImages/skillsets_bw.png" border=1 usemap="#circle" alt="circle">
                <map id="circle" name="circle">
                    <area shape="poly" coords="73, 296, 165, 172, 24, 126, 1, 132, 2, 135, 12, 139, 8, 162, 8, 187, 12, 210, 21, 234, 33, 257, 48, 276, 61, 289" href="http://www.pz.com" alt="GFX" title="GFX" />
                    <area shape="poly" coords="82, 293, 169, 174, 260, 300, 238, 314, 209, 326, 184, 329, 161, 330, 131, 326, 106, 319, 89, 309, 83, 320" href="http://www.pz.com" alt="HTML" title="HTML" />
                    <area shape="poly" coords="321, 123, 327, 149, 329, 180, 325, 208, 315, 238, 303, 260, 276, 287, 284, 296, 258, 290, 173, 171" href="http://www.pz.com" alt="JQuery" title="JQuery" />
                    <area shape="poly" coords="20, 117, 164, 165, 165, 18, 151, 0, 150, 12, 127, 15, 102, 23, 71, 41, 49, 61, 30, 88" href="http://www.pz.com" alt="PHP" title="PHP" />
                    <area shape="poly" coords="172, 43, 172, 165, 311, 120, 325, 100, 312, 104, 301, 80, 284, 59, 263, 40, 240, 26, 216, 17, 189, 12, 171, 11" href="http://www.pz.com" alt="CSS" title="CSS" />
                </map>

<script type="text/javascript">
opacity = 0.9;
</script>
<!--[if IE]>
<script type="text/javascript">
opacity =  0.1;
</script>
<![endif]-->
<script>
$(document).ready(function () {
    $('#usa').mapster({
        fillOpacity: opacity,
        render_highlight: {
            fillColor: '2aff00',
            stroke: false,
            altImage: 'theImages/skillsets.png'
        },
        render_select: {
            fillColor: 'ff000c',
            stroke: false,
            altImage: 'theImages/skillsets.png'
        },
        fadeInterval: 50
    });
});
</script>
</BODY>
4

2 に答える 2

2

この種のことをすぐに実行できる jquery プラグインであるImageMapsterを使用できます。

ImageMapster を使用した例: http://jsfiddle.net/jamietre/shbjk/

$('#Image-Maps_8201306061020497').mapster({
    render_highlight: {
        altImage: 'http://www.interfaithmedical.com/skillsets.png'
    }
});

この手法に興味がある場合は、キャンバスに描画を行う JavaScript コードはこちらにあります。

于 2013-06-06T15:14:33.000 に答える
1

色付きの画像をマップで定義された部分にカットする必要があります。結果として得られるパーツは、当然、透明な背景を持つようになりました。それらを白黒画像の上に配置し、属性「表示」を「なし」に設定します。

または、HTML5 を使用できる場合は、画像の上にキャンバスを配置し、色付きの画像部分を直接 canvas 要素に読み込みます。

于 2013-06-06T14:54:18.613 に答える