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!