onHover change image using image-map

My JS Fiddle: 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" />

What I am looking to do is change the part of the image based on the user mouseover action. So let's say for example the user hover their mouse over CSS the CSS portion of the color image should fade in and the black&white should fade out and on mouse out the color image should fade out and the black&white image should fade in. Is that possible?

My guess is, put the black&white image directly on top of the color and use JQuery to complete the swap?

SOLUTION:

<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>

回答1:

You could use ImageMapster, a jquery plugin that does this sort of thing out of the box.

Your example using ImageMapster: http://jsfiddle.net/jamietre/shbjk/

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

If you're interested in the technique, the javascript code that does the drawing on a canvas is here.

回答2:

You have to cut the colored image into the parts defined by your map. The resulting parts naturally got to have a transparent background. Position them over the black and white image and set the attribute "display" to "none".

OR If you're able to use HTML5 position a canvas over your image and load the colored image parts directly into the canvas element.