Welcome to WebmasterWorld Guest from 23.20.223.88

Forum Moderators: open

Message Too Old, No Replies

IE image map border problem

     
12:09 am on Aug 31, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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?
2:52 pm on Sep 11, 2012 (gmt 0)



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
3:08 pm on Sep 11, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
9:27 am on Sep 12, 2012 (gmt 0)



send me a pm and I'll help you look around ;)
1:38 pm on Sep 12, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Sent you a PM
2:24 pm on Sep 12, 2012 (gmt 0)



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month