homepage Welcome to WebmasterWorld Guest from 54.211.0.191
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved