Manage Email Signatures centrally from your Desktop - For All Users

gbsales · Posted: Wed Aug 27, 2008 3:36 pm Post subject: Remove blue outline around image

We have an image that when clicked send the recipient to our web site. When I added the hyperlink it added a blue outline around the logo. How can I remove this outline?

gbs

Dave Culley · Posted: Wed Aug 27, 2008 6:11 pm Post subject:

Hi,

The blue box is added as you are turning the image into a hyperlink. To remove this you will need to go into the code view in the cockpit, and add an extra line into the code. Please add 'border=0' without the quotation marks inside the <img> tag and you will find this will remove the border.

Thanks

gbsales · Posted: Wed Aug 27, 2008 7:55 pm Post subject:

Thanks for the tip.

John Martin · Posted: Wed Oct 08, 2008 4:36 pm Post subject:

That border tip doesn't work for image maps in the HTML.

Is there a fix for that?
_________________
-- John Martin, Web Developer
McGlinchey Stafford PLLC
www.mcglinchey.com | www.cafalawblog.com

Jesper Frier · Posted: Wed Oct 08, 2008 6:32 pm Post subject:

Please post your HTML code that does not work with "border=0".
_________________
</Jesper> | Manage Email Signatures from your Desktop | Test Email Signature in All In-boxes | Email Signature Showcase

nathan.page · Posted: Wed Oct 08, 2008 10:02 pm Post subject: Image Map without border example

Going to copy a little code here to show how borders are configured. This example is done with my own company logo as well as an image map, and can be viewed online HERE

To generate what you see in the example copy the code snippet below into notepad and save it as %yournamehere%.HTM or %yournamehere%.html where %yournamehere% means what ever your want to call the file. From there open the file from your save location, and it will open with your default web browser and you can then view it locally.

<html>
<head>
</head>
<body>
Blue Border Example:
 
<a href="http://www.aacotechonline.com"><img src="http://www.aacotechonline.com/images/logo/AACo_Logo_HQ.gif" border="1"></a>
 
No Border Example: 
<a href="http://www.aacotechonline.com"><img src="http://www.aacotechonline.com/images/logo/AACo_Logo_HQ.gif" border="0"></a>
 
For an Image Map with border example:
<MAP NAME="map1">
<AREA
HREF="http://www.aacotechonline.com/contact.htm" ALT="Contact Us" TITLE="Contact Us"
SHAPE=RECT COORDS="6,116,97,184">
<AREA
HREF="http://www.aacotechonline.com/netservices.htm" ALT="Network Services" TITLE="Networ Services"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="http://www.aacotechonline.com/request.htm" ALT="Submit Request" TITLE="Submit Request"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>

<IMG SRC="http://www.aacotechonline.com/images/AACo_Image_Map.gif"
ALT="map of AAco Technology Website" BORDER=1 WIDTH=300 HEIGHT=300
USEMAP="#map1"> 

[ <A HREF="http://www.aacotechonline.com/contact.htm" ALT="Contact Us">Contacts Us</A> ]
[ <A HREF="http://www.aacotechonline.com/netservices.htm" ALT="Network Services">Network Services</A> ]
[ <A HREF="http://www.aacotechonline.com/request.htm" ALT="Submit Request">Submit Request!</A> ]

For an Image Map without border example:
<MAP NAME="map2">
<AREA
HREF="http://www.aacotechonline.com/contact.htm" ALT="Contacts" TITLE="Contact Us"
SHAPE=RECT COORDS="6,116,97,184">
<AREA
HREF="http://www.aacotechonline.com/netservices.htm" ALT="Network services" TITLE="Network Services"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="http://www.aacotechonline.com/request.htm" ALT="Submit Request" TITLE="Submit Request"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>

<IMG SRC="http://www.aacotechonline.com/images/AACo_Image_Map.gif"
ALT="map of AAco Technology Website" BORDER=0 WIDTH=300 HEIGHT=300
USEMAP="#map2"> 

[ <A HREF="http://www.aacotechonline.com/contact.htm" ALT="Contact Us">Contacts Us</A> ]
[ <A HREF="http://www.aacotechonline.com/netservices.htm" ALT="Network Services">Network Services</A> ]
[ <A HREF="http://www.aacotechonline.com/request.htm" ALT="Submit Request">Submit Request!</A> ]
</body>
</html>
_________________
Sincerely,

Nathan Page
AACo Technology Consulting Group
http://www.aacotechonline.com

John Martin · Posted: Mon Oct 13, 2008 2:06 pm Post subject:

Hmm. I see boxes around the mapped square in IE 6, IE 7 and Firefox 2.0.0 for your sample.

This file http://www.mcglinchey.com/temp/cafa_staff_shows_box.htm
uses the same border=0 technique and gives me a box around the image in Outlook 2003 (works fine in Outlook 2007).

I've assumed it was an unfixable Outlook issue.
_________________
-- John Martin, Web Developer
McGlinchey Stafford PLLC
www.mcglinchey.com | www.cafalawblog.com

nathan.page · Posted: Mon Oct 13, 2008 2:12 pm Post subject:

You should see one example with a border, and one without a border.
_________________
Sincerely,

Nathan Page
AACo Technology Consulting Group
http://www.aacotechonline.com