Using Image Tag Border Attribute To Prevent The Blue Halo Effect
Depending on how far along you are in your study and practice of HTML, you may or may not be ready to add images to your Web pages. This quick tip is being posted to answer one of our more common questions regarding image display.
A quick refresher for those who are not up to speed on the use of image tags: To add an image into your HTML document, you must reference the location of the image on your server (or elsewhere on the Web) using an image tag.
For example:
< IMG src=”/images/picture.gif” >
The above sample tag tells a browser to look in the images directory of the site being viewed, then find and display the graphic named picture.gif If you wanted the image to link to another Web page you would simply integrate the anchor tag into the process as follows:
< A href=”page.com” > < IMG src=”/images/picture.gif” > </A>
The very common problem new Webmasters encounter when adding hyperlinked images to their pages is a bright blue or purple “halo” effect around their images. You may have run into this yourself or seen it on other Web pages.
By default, when you add a link to an image display, the browser will interpret and display the linked image with the standard blue underscore for links, or purple underscore for visited links.
The way to correct this is to use the attribute border= within your IMG tag, and set border to ‘0′ :
< A href=”page.com” > < IMG border=0 src=”/images/picture.gif” > </A>
This tells the browser to omit the border display. In the case of a linked image, the blue/purple halo will disappear.
It’s amazing how many sites I see with this glaring, unattractive hyperlinked border still in place. What this tells me is simple: Most new Webmasters aren’t using a comprehensive Web design guide to master the basics.
As you can see from this example, the common problems we all face in the beginning are easily corrected, if you know how to go about doing so.
Tags: HTML tips, learn HTML, Learn Web Design, Web design basics