Image as Link

[shadowx360]

Hello,

 

I'm using an image as a link, and I basically create a new image element, set its source, create an "a" element, set it's href, and then I append the image as a child to the link. However, what I get is a button with a blue outline, as links are blue, and it automatically makes that blue outline on the button. I tried to force the border-color property to black (that's the background color of the page), but it still gives me that blue outline.

 

Any idea how to disable that, or turn it black?

[Adam]

Within your CSS just include:

 

img { border: 0; }

[shadowx360]

Not CSS, I'm using Javascript to create these elements and append them to the document.

[Adam]

Just set the .style.border property of the image object then.

[roopurt18]

Do as suggested and set it in your CSS and not your JavaScript.  Regardless of how you're creating them the CSS rules will be obeyed.  If you start putting CSS in your JavaScript you are combining logic and presentation and making it harder to fix things later.

 

The CSS rule you're looking for is:

a > img { border: none; }

 

Or if necessary:

a > img { border: none !important; }