Highlighted

Image map leaves a stroke around link area

Community Beginner ,
Feb 13, 2020

Copy link to clipboard

Copied

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???

TOPICS
Browser, Other, Preview, Product issue, Server side applications

Views

606

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image map leaves a stroke around link area

Community Beginner ,
Feb 13, 2020

Copy link to clipboard

Copied

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???

TOPICS
Browser, Other, Preview, Product issue, Server side applications

Views

607

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 13, 2020 0
Adobe Community Professional ,
Feb 13, 2020

Copy link to clipboard

Copied

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;
}

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2020 0
Community Beginner ,
Feb 14, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2020 0
Adobe Community Professional ,
Feb 14, 2020

Copy link to clipboard

Copied

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.  

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2020 0
Adobe Community Professional ,
Feb 14, 2020

Copy link to clipboard

Copied

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();">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2020 1
good dog LATEST
Community Beginner ,
Feb 14, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 14, 2020 0