CSS border/ onMouseOver border

[willg825]

hey all:

I have some images on a webpage. When a user mouseover's one, I want to create a 'white border' (1px solid) around the image. What I have works - except that when the border is up, the image shifts slightly to the right, kind of like a button is being pushed. I want the image to stay exactly where it is. I tried padding the image but it still shifts. I appreciate any ideas people might have. thanks all,

will

here is the code:

<td onmouseover="this.style.border='1px solid white'; underImg.style.visibility='visible';"
onmouseout="this.style.border='0px'; underImg.style.visibility='hidden';"
class="survivor">
<a href="somelink.html">
<img style="border:1px solid #F4A7BF; margin-right: 4px; margin-left: 4px; "
src="path_to_img" height="76" width="99">
</a>
<div id="underImg<?=$k?>"
style="color: white; visibility: hidden;">
Diagnosed at age 25
</div>
</td>

[ChadSEO]

willg825,

You should be able to solve the shift by adding a 1px padding, which you remove when you add the border, then add back in when the border is removed. Something like:

onmouseover="this.style.border='1px solid white'; this.style.padding='0px 0px 0px 0px';"

Then to remove it:

onmouseout="this.style.border='0px'; this.style.padding='1px 1px 1px 1px';"

I haven't actually tested this, but it should work for you. In theory. Probably

Chad

[willg825]

Chad:

Thanks for the reply. Padding works - with a small caveat - the first time I mouseover, it shifts the image to the left. But once I mouseover once, the image then stays put (i.e the functionality works perfectly for all mouseover/mouseout). I'm trying to figure this out now also - somehow shifting the image to the left one pixel originally. Let me know if you have any further ideas. I appreciate it.

Will

[bedlam]

This is a bit simpler than I think you're both making it.

Try this CSS:

a.image:link,
a.image:visited {
padding:1px; /* Pads the image */
background:transparent; /* Sets a transparent background */
}

a.image:hover,
a.image:active {
background:#fff; /* Sets a white background */
}

...with this html:

<a href="#"><img src="path/to/your/image.gif" alt="Test image" /></a>

...no javascript required.

-B

[willg825]

Hi Bedlam:

Thanks for the reply. I tried a similar approach at first. The problem is the application is slightly more complicated than I posted - in addition to the background image, there is some dhtml text effects in other parts of the page that (i am pretty sure) make javascript necessary (those effects are currently working properly). I am going to try now to get the CSS-only solution working and then use dhtml/javascript for those specific tasks.

Thanks

will

[ChadSEO]

Will,

The reason for the initial shift is probably that a padding is not set initially. If you add a 1px padding either in a style attribute, or to the "survivor" class, that should fix it.

padding:1px;

Chad

[willg825]

That did it! Thanks Chad.

Best,

Will