Highlighted

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

New Here ,
Apr 19, 2020

Copy link to clipboard

Copied

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?

 

Screen Shot 2020-04-19 at 10.38.14 PM.png

 

Topics

Other

Views

1.4K

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
This conversation has been locked.

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

New Here ,
Apr 19, 2020

Copy link to clipboard

Copied

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?

 

Screen Shot 2020-04-19 at 10.38.14 PM.png

 

Topics

Other

Views

1.4K

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
Advisor ,
Apr 19, 2020

Copy link to clipboard

Copied

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.

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...
New Here ,
Apr 19, 2020

Copy link to clipboard

Copied

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

 

 

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...
Adobe Community Professional ,
Apr 19, 2020

Copy link to clipboard

Copied

Add this to your style sheet

 

a {
    outline: 0;
}

 

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


Ben

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...
New Here ,
Apr 19, 2020

Copy link to clipboard

Copied

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?

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...
Adobe Community Professional ,
Apr 19, 2020

Copy link to clipboard

Copied

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.


Ben

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...
Adobe Community Professional ,
Apr 20, 2020

Copy link to clipboard

Copied

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


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...
New Here ,
Apr 20, 2020

Copy link to clipboard

Copied

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

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...
Adobe Community Professional ,
Apr 20, 2020

Copy link to clipboard

Copied

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 O'Shea, ACP
Alt-Web.com

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...
Adobe Community Professional ,
Apr 20, 2020

Copy link to clipboard

Copied

What's the URL to your online page? 

 

Nancy O'Shea, ACP
Alt-Web.com

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...
New Here ,
Apr 20, 2020

Copy link to clipboard

Copied

[Shopify link removed by moderator.]

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

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...
Adobe Community Professional ,
Apr 21, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web.com

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...
Resources
Learn Resources
Add a group