PDA

View Full Version : CSS link states and background image


mangofreak
12-16-2011, 10:45 PM
Hey Guys,

I have a link text with an icon (plus sign inside a box) that is aimed to toggle a div which is wrapping a couple of ul lists. The div is using an inline "display:none" All good to there.

On my external style sheet I am affecting the link to show a small icon of a plus sign inside a box.


#links h3 a:link{
color:black; background-image:url(../body-imgs/icon-open.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:15px;}


here is are my bits of code:

javascript going on the head of my html

<script language="javascript" type="text/javascript">
function toggle(obj) {
var el = document.getElementById(obj);
el.style.display = (el.style.display != 'none' ? 'none' : '' );
}
</script>


HTML

<h3 class="clear"><a href="#" onClick="toggle('4'); return false;">AUTO REPAIRS</a></h3>

<div style="display:none;" id="4">
<ul>
<li><strong>Name:</strong> Sisca's OK Tire &amp; Service</li>
<li><strong>Contact:</strong> Vince Sisca</li>
<li><strong>Telephone:</strong> 416 964-2250</li>
<li><a href="mailto:siscasauto@excite.com"><strong>Email</strong></a></li>
</ul>

<ul>
<li><strong>Name:</strong> Dupont Auto Collision</li>
<li><strong>Contact:</strong> George Esteves</li>
<li><strong>Telephone:</strong> 416 535-6660</li>
<li><a href="mailto:dupontautocollision@bellnet.ca"><strong>Email</strong></a></li>
</ul>

<ul>
<li><strong>Name:</strong> Nicks CARSTAR</li>
<li><strong>Contact:</strong> Nick Saccoia</li>
<li><strong>Telephone:</strong> 416 536-2526</li>
<li><a href="http://www.nickcarstar.ca" target="_blank"><strong>Website</strong></a></li>
</ul>
</div>



What I want to accomplish is that when the link is on the initial state a:link:

Link +

changes to

Link -

once the Link is clicked. Or a:visited

So far I have not been able to do it. I tried using the css link states but somehow I encounter issues i.e. when I use Visited all my links change color even if I have not visited any.

Any ideas as to why would this occur.
Also I'm following the expected order:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked


help please :)