CODEWITHSUNDEEP
htmlcssgoogle-chrome
user3607370
user3607370

Reputation: 237

how to remove the border?

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

Upvotes: 1

Views: 338

Answers (3)

Daniel
Daniel

Reputation: 3514

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

Upvotes: 1

imbondbaby
imbondbaby

Reputation: 6411

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/

Upvotes: 0

Matt The Ninja
Matt The Ninja

Reputation: 2731

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>

Upvotes: 0

Related Questions