0

我想知道这段代码是否可以更好地用 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">

4

1 回答 1

2

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/

于 2013-05-24T04:52:27.817 回答