How do I set the background image of an active link in CSS?

T

Terry B

New member
I have two methods:
CSS method 1
.link_1 a {background:url(../images/button.png) no-repeat;display: block;}
.link_1 a:hover {background-position: 0px -34px;}
.link_1 a:active {background-position: 0px -68px;}

CSS Method 2
.link_2 a {background:url(../images/button_out.png) no-repeat;display: block;}
.link_2 a:hover {background:url(../images/button_over.png) no-repeat;display: block;}
.link_2 a:active {background:url(../images/button_over.png) no-repeat;display: block;}

HTML:
<div id="links" class="link_1" ><a href="#" ><img src="images/trans.png" border="0" /></a></div>
<div id="links" class="link_2" ><a href="#"><img src="images/trans.png" border="0" /></a></div>

When clicking on a link, it only shows the active link while clicking, when released, it reverts back to trans.png, I would like it it remain as "button_over.png" while it is active. It works with using colours and font/text styling:

.sitemap {font-family: tahoma; font-size: 10px; color: #FFFFFF;}
a:link.sitemap{color: #FFFFFF; }
a:visited.sitemap{ color: #999999;}
a:hover.sitemap{color: #000000; }
a:active.sitemap{font-family: tahoma; font-size: 10px; color: #FF6600;text-decoration:overline;}

Any advice would be great, thanks!
 
Back
Top