Click to See Complete Forum and Search --> : image borders


mabgirl
06-19-2006, 12:18 AM
I have put an image on my site, and linked it to an url. I managed to make it such that when i hover my mouse over it, the border will turn yellow

a:hover IMG {border :solid #ffcc00;}

but the thing is, when my mouse is not on it, it will remain dark blue/purple. how do I change this colour so that it is black when the mouse is not on it?

thanks!

Aelfwine
06-19-2006, 01:30 AM
You just declare { color: #000; }. You could just select any image that's a hyperlink by 'a:link img', or use a class (a:link .class) or id (a:link #id) if you need greater specificity. You might need to declare styles for a:visited and a:active, as well.
Oh, and the #000 declaration - that's shorthand (http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/) for #000000

Valli
06-19-2006, 01:42 AM
Hi,

You could use the following style setting to change the color of the image border on MouseOver and by default to display the border in black color.

<style type="text/css">

.borderstyle img{
border: 2px solid black;
}

.borderstyle:hover img{
border: 5px solid yellow;
}

.borderstyle:hover
{
color: red;
}

</style>

The style settings in the Img tag can be applied as

<a href="http://www.syncfusion.com/" class="borderstyle"><img src="logo.jpg" /></a>

Let me know if u have any doubt.

With regards,
Valli

mabgirl
06-19-2006, 06:28 AM
that worked! thanks to both of you for the prompt reply!