IE image map border problem

[andrewsmd]

Ok, help me out here. I'm changing the image src using jquery and an image map. However, in IE 9 when you click one of the image map areas, you get an ugly border. I've tried border: none on every tag img{border: none;} area{border: none;} a img{border: none;} with no luck. Here's the relevant code

<img src="images/Home/rotatorLeft.png" usemap="#Map" border="0" id="imageRotator" style="border: none;" />
<map name="Map" style="border: none;">
<area style="border: none;" shape="poly" coords="8,216,8,216,100,193,154,84,155,6,111,6,69,28,40,52,10,103,5,146" href="javascript:changeImage('rotatorLeft.png');">

<area shape="poly" coords="306,215,219,194,159,85,160,6,208,8,247,26,280,52,302,86,312,145" href="javascript:changeImage('rotatorRight.png');">

<area shape="poly" coords="13,218,100,197,221,197,304,219,297,240,267,280,206,308,169,311,130,311,94,300,53,277,25,242" href="javascript:changeImage('rotatorBottom.png');">
</map>

function changeImage(id) {
//$('#imageRotator').attr("src", "http://example.com/"+id).stop(true, true).hide().fadeIn(3000)
$("#imageRotator").stop(true, true);
$("#imageRotator").attr("src", "http://example.com/"+id);

}//changeImage

I can email anyone a public link to see this in action if they want.

I'll note if I comment the last two lines and uncomment the top line, i get one border briefly, then it disappears for all subsequent clicks. Any ideas?

[lostdreamer]

it's probably in focus ;)

Try this:

function changeImage(id) {
 //$('#imageRotator').attr("src", "http://example.com/"+id).stop(true, true).hide().fadeIn(3000)
 $("#imageRotator").stop(true, true);
 $("#imageRotator").attr("src", "http://example.com/"+id);
 $("#imageRotator").blur();
}//changeImage 

It will 'unfocus' immediately after a click

[andrewsmd]

It's not the generic blue image border, it's a black border that almost looks like the points of my image map. Here's an image of what I mean [imgur.com...] (not sure if I can post that admins?) Either way it didn't work. I noticed it does seem like it was a focus issue though, as soon as I click anywhere else it goes away. Any other ideas? Like I said, I can pm you a public link if you want.

[lostdreamer]

send me a pm and I'll help you look around ;)

[andrewsmd]

Sent you a PM

[lostdreamer]

Fix for others with the same problem:

$(window).load(function() {
 if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
  $('area').focus(function() {
   $(this).blur();
   });
  }
 });

onfocus="blur()" will also fix it in MSIE, but will shift the problem to other browsers, putting this javascript in while checking the browsertype seems to work cross-browser