logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 12-16-2011, 09:45 PM   #1
mangofreak
mangofreak's Avatar
 
Join Date: Jan 2006
Location: Toronto-Canada
Posts: 444
Default CSS link states and background image

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.

Code:
#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
Code:
<script language="javascript" type="text/javascript">
function toggle(obj) {
	var el = document.getElementById(obj);
	el.style.display = (el.style.display != 'none' ? 'none' : '' );
}
</script>
HTML
Code:
<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
__________________
J.
DW | FW | HTML | CSS | ASP | some PHP | Windows | Ubuntu
mangofreak is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:37 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com