View Full Version : Can't get rid of image borders in rollover buttons :(

Mar 10th, 2008, 04:33 AM
Hello everyone,

The following thread was originally posted in the wrong board cause I thought it was a javascript problem, yet I was told it was a problem with the layout and that I should post it here. Your help is deeply appreciated! :)


Hello everyone,

I apologize if this has been posted before, I took a look around to see if I could find an already posted solution but I had no luck.

I could use some assistance with a mouse-over javascript that I made up. Well, more like I used a code-generator since I'm still new at the javascript gig, but I got it working except between the buttons I have spaces that I don't need. I was wracking my brains trying to figure out what I'm missing. Hopefully you can help me.. I have the code posted below but it may be better to see the actual website, which I will post as well. It's for an insurance company and I'm messing around with some ideas for rollover buttons for it. If you visit the website I apologize if the coding is a little messy. Thank you for your time

url: http://digitalarmor.net/huffcook/index.html

Javascript coding--

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

image1 = new Image();
image1.src = "images/productsbutton2.gif";

image2 = new Image();
image2.src = "images/providersbutton2.gif";

image3 = new Image();
image3.src = "images/tipsforyoubutton2.gif";

image4 = new Image();
image4.src = "images/ourpeoplebutton2.gif";

image5 = new Image();
image5.src = "images/ourpledgebutton2.gif";

image6 = new Image();
image6.src = "images/contactusbutton2.gif";

// End -->

(Below is pasted within the body tags)

<a href="products.html" onmouseover="image1.src='images/productsbutton2.gif';" onmouseout="image1.src='images/productsbutton.gif';">
<img name="image1" src="images/productsbutton.gif" border=0></a>

<a href="providers.html" onmouseover="image2.src='images/providersbutton2.gif';" onmouseout="image2.src='images/providersbutton.gif';">
<img name="image2" src="images/providersbutton.gif" border=0></a>

<a href="tipsforyou.html" onmouseover="image3.src='images/tipsforyoubutton2.gif';" onmouseout="image3.src='images/tipsforyoubutton.gif';">
<img name="image3" src="images/tipsforyoubutton.gif" border=0></a>

<a href="ourpeople.html" onmouseover="image4.src='images/ourpeoplebutton2.gif';" onmouseout="image4.src='images/ourpeoplebutton.gif';">
<img name="image4" src="images/ourpeoplebutton.gif" border=0></a>

<a href="ourpledge.html" onmouseover="image5.src='images/ourpledgebutton2.gif';" onmouseout="image5.src='images/ourpledgebutton.gif';">
<img name="image5" src="images/ourpledgebutton.gif" border=0></a>

<a href="contactus.html" onmouseover="image6.src='images/contactusbutton2.gif';" onmouseout="image6.src='images/contactusbutton.gif';">
<img name="image6" src="images/contactusbutton.gif" border=0></a>
<img src="images/menubottom.gif" border="0">

Mar 10th, 2008, 04:48 AM
ok so whats the problem?

Mar 10th, 2008, 04:50 AM
There are white spaces between the buttons on the left side, you don't see them on your browser if you visit the site? Or do they look connected to you?

Mar 10th, 2008, 04:50 AM
I think he's talking about in between each of the buttons on the side.

The way I see it, the space is not being created by coding, but rather the images themselves, since each one is lined up right underneath one another.

You could try resizing the images or cropping the blank space around them in a photo editor.

Hope I understood correctly.


Just read your post. It's ok in firefox, but i can see the white lines in IE, so disregard my advice. I originally thought you were talking about the blue space in between.

Mar 10th, 2008, 04:54 AM
Add this in between your head tags

<style type="text/css">
td a img {

I suggest you read the link in my sig titled "Why Tables for Layout is Stupid?".

Mar 10th, 2008, 05:01 AM
Thanks Aero, that did the trick! And I appreciate the input from the rest of you :) Thanks for your efforts, I really appreciate this!