0

The landing page is a static background image and I created a clickable area with image map. The problem is that a blue border (see image below) shows up when you click on the area. I want to remove that border however nothing seems to be working.

<div class="fixed-background" >
<img src="picture.svg" usemap="#image-map">
</div>

<map name="image-map">
<area href="target.org" coords="300,1000,30,1100" shape="rect">
</map>

Styx
  • 9,863
  • 8
  • 43
  • 53
user8708289
  • 1
  • 1
  • 1

2 Answers2

3

That's looks like the focus state.

You can avoid that defining

*:focus { outline: none; }

but on the other hand, the visible focus is important for people who don't use a mouse or touchpad, i.e. who only use the keyboard for moving around at a page (keyword ACCESSIBILITY), so you should really consider leaving it as is (maybe only change the outline color to fit better in your page)

Johannes
  • 64,305
  • 18
  • 73
  • 130
1

That looks like the object's outline.

If you specify outline: none in the CSS for an object, it removes the blue glow that you see when an element is selected in the browser.

Chris J
  • 1,441
  • 9
  • 19
  • `outline:none` by itself is not a good solution. There's a reason why the outline is there. – I haz kode Oct 02 '17 at 12:34
  • it depends what you want to achieve. This isn't an input field, and there is little to be gained from retaining the outline for an image map. – Chris J Oct 02 '17 at 12:35
  • Not trying to achieve anything. When you remove the default browser outline and don't provide an alternative, the website becomes inaccessible/less accessible to someone not using a mouse. – I haz kode Oct 02 '17 at 12:36
  • That's down to the discretion of the developer. I'm not so sure you'd want to produce an elaborate solution that isn't just `outline: none`, just so people could (somehow) choose to use a clickable image map without a mouse. It's better to solve the problem, rather than issues that don't or won't exist. – Chris J Oct 02 '17 at 12:38