| IE image map border problem
|
andrewsmd
msg:4490018 | 12:09 am on Aug 31, 2012 (gmt 0) |
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
msg:4493813 | 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
|
andrewsmd
msg:4493823 | 3:08 pm on Sep 11, 2012 (gmt 0) |
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
msg:4494171 | 9:27 am on Sep 12, 2012 (gmt 0) |
send me a pm and I'll help you look around ;)
|
andrewsmd
msg:4494291 | 1:38 pm on Sep 12, 2012 (gmt 0) |
Sent you a PM
|
lostdreamer
msg:4494332 | 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
|
|
|
