1

please help to solve the problem.

html: 

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" usemap="#link_index" />

<map name="link_index">
    <area shape="rect" coords="1,1,400,480" href="index.html" alt="" />
</map>

the problem is that when you click on the image appears blue border in the image. they disappear in a second, but I need to make it not appear

http://jsfiddle.net/Ub886/1/

google chrome last version

Daniel
  • 3,541
  • 3
  • 33
  • 46
user3607370
  • 237
  • 1
  • 10

3 Answers3

1

The blue border you are seeing is actually a hyperlink in "active" state. You can add css definitions to style those borders:

area:focus{
  border: none;
  outline-style: none; 
  -moz-outline-style:none;  
}

Fiddle as example

Daniel
  • 3,541
  • 3
  • 33
  • 46
  • 2
    Bear in mind that the `:focus` styles should give some visual indication of where the focus is for keyboard navigation, see: '[outlinenone](http://www.outlinenone.com/).' – David Thomas Jun 29 '14 at 17:02
  • Good point! One can also consider using `area:focus` for styling to remove the `:active` border only from image areas. (I'll add this to my answer) – Daniel Jun 29 '14 at 17:08
0

Try:

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" usemap="#link_index" style="border:0"/>

You could do this on the CSS stylesheet as well

.logo_pic img-responsive {
    border:0;
}

.logo_pic img-responsive:hover {
    border:0;
}

EDIT

img:active, :focus { outline: none; -moz-outline-style: none; }

JSFiddle:

http://jsfiddle.net/Ub886/4/

imbondbaby
  • 6,351
  • 3
  • 21
  • 54
0

Inline CSS ...

<img class="logo_pic img-responsive" src="images/logo.png" alt="logo" style="border:0;" usemap="#link_index" />

<map name="link_index">
    <area shape="rect" coords="1,1,400,480" href="index.html" alt="" />
</map>
Matt The Ninja
  • 2,641
  • 4
  • 28
  • 58