map area: onfocus=blur() works in IE but now adds an outline to Firefox?

Question

I have an image map:

<map>
  <area ..>
  <area ..>
</map>

There was an outline showing up in IE so I modified the code to read:

<area onfocus="blur();"

This removed the outline from IE, but now I have an outline when I click on the area in Firefox (version 9.0.1)...

I also tried:

map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

using the information from this posting...

Any advice would be greatly appreciated.

score 1 · Answer 1 · edited Apr 22 '12 at 04:18

1

Problem solved:

onclick="blur()" onfocus="navigator.appName == 'Microsoft Internet Explorer' ? blur() : null"

edited Apr 22 '12 at 04:18

Josh Darnell

11,304
9
38
66

answered Apr 21 '12 at 11:47

sally oldfield

41
1

score 1 · Answer 2 · answered Mar 13 '14 at 16:25

Such a bizarre issue. I tried Sally Oldfield's solution, but found that Chrome suffers from the same issue as IE - it needs the blur() call.

So this is the solution I came to that works in Firefox, Chrome and IE:

<area onfocus="navigator.userAgent.indexOf('Firefox') != -1 ? null : blur()" ... />

score 1 · Answer 3 · answered Jan 20 '12 at 15:34

1

Try to add this to your CSS:

area:active, area:focus {
    outline: none;
}

answered Jan 20 '12 at 15:34

sdrm

194
1
8

I **did**...see above. I didn't code highlight it before, so I just edited it so you can see it. – redconservatory Jan 20 '12 at 15:40

score 0 · Answer 4 · answered Apr 19 '14 at 00:45

0

<area tabindex="-1" [...] />

I had thought I fixed this using a jQuery version of the blur() solution, which worked for Safari, but then FF had a dotted outline. adding a tabindex="-1" to each solved for both!

answered Apr 19 '14 at 00:45

fastasleep

306
2
6

map area: onfocus=blur() works in IE but now adds an outline to Firefox?

4 Answers4