[Locked, wrong forum] clickable image now leaves blue lines

[WB94804289]

Don't know how to use html. 

I managed to create an html file with a clickable image AND managed to upload it to my website.  The image is clickable and redirects to the appropriate page but now it leaves behind these icky blue lines?

 

[rayek.elfin]

That outline visually indicates the linked area, which is important for accessibility reasons (think of someone physically impaired who cannot use a mouse, but only 'tabs' through all the available links on a page, for example).

To remove it set the outline to 0 or none. But it considered VERY bad usability and accessibility practice to do so.

[WB94804289]

Greetings,

I don't remember encountering these blue lines on any other website before so there must be some type of standard formatting where they don't appear unprofessional yet are still very accessible. 

They don't have to even be visible and the coding could still benefit someone who relies on them for navigating the web.

I used Dreamweaver because I thought it could create html webpages that look like every other webpage.   

Is there another way to create a clickable image for my Shopify store?  I tried Photoshop and it left slices.  Now Dreamweaver leaves behind blue lines.  LOL

Is there an easy way to make a webpage with clickable or responsive images?

Kind Regards

[BenPleysier]

Add this to your style sheet

a {
    outline: 0;
}

But before you do, have a read of http://www.outlinenone.com/ 

[WB94804289]

If you were going to create a clickable image as an example for this thread, how would you do it? 

Would you post an example of a clickable image as it would be used on this Adobe website?

[BenPleysier]

When clicking a clickable image, it usually takes me to another place on the page or to another page so that the image is out of view. If it does remain in view, then it is an inherent part of an HTML document that the 'halo' is seen. No probs.

[Jon Fritz]

I agree with the others here, it's typically bad form to remove the outline from image maps, from an Accessibility point of view.

I'm guessing the reason you truly want it gone is because it doesn't line up with the image. When you use a standard image map on a responsive image and the image either grows or shrinks away from the size you used to create the map, the <area> tag's coordinates no longer line up with the image itself and cause the offset look you have posted above. The larger or smaller it gets, than the size used to set the coordinates in DW, the worse it gets. Even disappearing from the image entirely in certain cases

You should look into a responsive image map script to use javascript/jquery to take care of the drifing problem. When the outlines always line up with the image parts they're meant to cover, it's not nearly as distracting or noticeable to your viewers.

Something like this works very well: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

[WB94804289]

I remade the webpage and now the blue lines stay right above the clickable image, however, now the area that is clickable that is supposed to be directly above the image has decided on its own to move an inch and a half to the right...

[Nancy OShea]

As Jon says, image maps are not responsive.  Used widely in the late 20th century when everyone had same sized computer displays, image maps are rarely used today. 

If you can work with code, an alternative approach is to build linked SVG shapes on top of a responsive raster image.  See working example below.   In smaller viewports, the map remains responsive.

https://jsfiddle.net/NancyO/6k3v4ge1/13/

Otherwise, I stay clear of image maps.  Separate linked images or buttons are a lot more flexible.

[Nancy OShea]

What's the URL to your online page? 

[WB94804289]

[Shopify link removed by moderator.]

I had to watch several how-to videos just to create this webpage.  

[Nancy OShea]

Your site is built with Shopify, not Dreameaver.  

Ask the Shopify community for help.

https://community.shopify.com/c/Shopify-Apps/Image-mapping-or-hotspots/td-p/406491