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 に答える