CODEWITHSUNDEEP
javascriptjquery
user537137
user537137

Reputation: 614

Re-writing pure javascript to jQuery

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

Upvotes: 0

Views: 82

Answers (1)

Ramunas
Ramunas

Reputation: 3883

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/

Upvotes: 2

Related Questions