Image map leaves a stroke around link area

[good dog]

I'm far from a DW advanced user but I'm creating a html file for a client with an image map over an area of an image that looks like a "Learn more" button.  So it works fine and takes the viewer to a web page in a new tab window, per the link I was given but…when you click the tab contaning the html with my image map, there is a faint stroke in the shape of the image map around the hot area.  The client doesn't like that and questions what is wrong.  So if you click elsewhere in the window it disappears.

How do I get rid of that outline left behind???

[Nancy OShea]

The outline around the linked area is a focus or active state to inform users where they are in relation to other elements on the page.  This is good for usability.  Removing the outline is bad for usability.  Your choice. 

To remove outlines and borders around linked images, add this to your CSS code.

a img { 
  border: none; 
}

area {
  outline: none;
}

[good dog]

I  replied and it was taken down as spam.  What the ???  I don;t know how to get it back and there was extensive explanation.  But brief as I can, I didn't use CSS.  

I just used the map tool.  It takes viewer to the website and page the client wants it to go to. That works fine.

I understand and thought it was the case, that the outline left behind is the indicator that it's a link.

But why is it not a rollover???  It appears when one actually clicks it and then it remains when you click back in the original tab window.  

But if I make it go directly to the page and use the back arrow to go back, it's gone.  

But client wants original window to remain open.

[Nancy OShea]

I provided the answer to your question in my first reply.  I don't know how to make it any simpler than that.  Give it a try.  

[Jon Fritz]

It disappears when you go to a new page and back because the original page is reloaded. If your page with the image map isn't being reloaded (if clicking it makes something else on the page happen) the outline appears, telling the user what was clicked in order to make the event occur. 

Browsers, by default, add the outline to the linked <area> tag onfocus.

In order to override the browser default, you will need to either modify the page/site CSS to tell it you don't want the outline there by adding the lines of CSS Nancy gave to your .css file, or you could add a small onfocus event to your links called "this.blur()"

<area shape="rect" coords="0,0,82,126" href="something.html" alt="alt text here" onfocus="this.blur();">

[good dog]

Ok thanks for your reply and the code.  Seems you and Nancy are on the same page and it's what I actually thought would have to be done.  I'll give it a try.  Copy and paste your code in hopefully where it belongs and cross my fingers.  I'll copy and try both codes.