Question

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>

Answer 1

你可以使用ImageMapster，这是一个开箱即用的jquery插件。

使用ImageMapster的示例：http://jsfiddle.net/jamietre/shbjk/

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

如果您对该技术感兴趣，那么在画布上绘制的javascript代码为here。

Answer 2

您必须将彩色图像剪切为地图定义的部分。由此产生的部分自然具有透明背景。将它们放在黑白图像上，并将属性“display”设置为“none”。

OR 如果您能够使用HTML5将画布放在图像上并将彩色图像部分直接加载到画布元素中。

onHover使用图像映射更改图像

2 个答案: