Question

我想知道这个代码是否可以更好地用jQuery编写。代码在firefox中工作正常，但是在safari或chrome中没有工作，并且它没有给出任何错误，所以我很难弄清楚它为什么不起作用。

感谢任何帮助或想法...

<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' )
})

示例：http://jsfiddle.net/vYwv8/

将纯javascript重写为jQuery

1 个答案: