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