Re-writing pure javascript to jQuery

Question

I'm wondering if this code could be better written in jQuery. The code works fine in firefox but isn't working in safari or chrome and it is not giving any errors so it's pretty hard for me to work out why it isn't working.

Any help or thoughts appreciated...

<img border="0" alt="" usemap="#Image-Maps_8201304160533561" src="http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png" id="Image-Maps_8201304160533561">
<map name="Image-Maps_8201304160533561" id="_Image-Maps_8201304160533561">

<area onmouseout="if(document.images) document.getElementById('Image-Maps_8201304160533561').src= 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png';" onmouseover="if(document.images) document.getElementById('Image-Maps_8201304160533561').src='http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/hip.png';" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,10,90,48" shape="rect">

<area onmouseout="if(document.images) document.getElementById('Image-Maps_8201304160533561').src= 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png';" onmouseover="if(document.images) document.getElementById('Image-Maps_8201304160533561').src='http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/knee.png';" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,99,90,137" shape="rect">

<area onmouseout="if(document.images) document.getElementById('Image-Maps_8201304160533561').src= 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png';" onmouseover="if(document.images) document.getElementById('Image-Maps_8201304160533561').src= 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/foot.png';" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,197,90,235" shape="rect">

Answer 1

HTML:

<img border="0" alt="" usemap="#Image-Maps_8201304160533561" src="http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png" id="Image-Maps_8201304160533561">
<map name="Image-Maps_8201304160533561" id="_Image-Maps_8201304160533561">
<area data-body-part="hip" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,10,90,48" shape="rect">
<area data-body-part="knee" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,99,90,137" shape="rect">
<area data-body-part="foot" title="" alt="" href="http://www.chrisjonesortho.com.au/patient-information/" coords="0,197,90,235" shape="rect">
</map>

JS:

$('area')
.on('mouseover', function(){
    var bodypart = $(this).data('body-part');
    $('#Image-Maps_8201304160533561').attr('src', 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/' + bodypart +'.png' )
})
.on('mouseout', function(){
    $('#Image-Maps_8201304160533561').attr('src', 'http://www.chrisjonesortho.com.au/wp-content/themes/medicate/images/Human-Image_Chris-Jones.png' )
})

Sample: http://jsfiddle.net/vYwv8/