Designating an active link, or changing font colour

liunx

Guest
Hi,

Have run into a bit of a wall with changing font colours.

My font sttributes are set using CSS as follows;

A:link {
color: #948578;
background-color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}

A:visited {
color: #948578;
background-color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}

A:hover {
color:#2C5163;
background-color:#FFFFFF;
text-decoration:none;
font-weight: bold;
}
A:active {
color: #2C5163;
background-color:#FFFFFF;
text-decoration:none;
font-weight: bold;
}

The HTML that contains those links is as follows;

<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript:getit(3,1)">The US$6.90<br />
Economy Plan</a><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript:getit(3,2)">The US$9.90<br />
Deluxe Plan</a><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript:getit(3,3)">The US$16.90<br />
Luxury Plan</a><br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"JavaScript:getit(3,4)">Take This One<br />
To The Checkout</a><br />

It works just fine... in that the font colour for the active link is set on click without javascript. However, when the page first loads, I default the selection to the first option.

Can I tell the browser to treat the first link as active? If not, any suggestions on how can I change the font colour for the first option to the "active" colour, and then have it revert to the CSS when another option is selected?

Thanks
CTB
Note... I have posted a version of this under Javascript as well... perhaps that's a better way to achieve the desired result.replace

A:active {
color: #2C5163;
background-color:#FFFFFF;
text-decoration:none;
font-weight: bold;
}


with

A:active, .AACTIVE {
color: #2C5163;
background-color:#FFFFFF;
text-decoration:none;
font-weight: bold;
}

then have your "defaultly active" link look like this:

<a href=http://www.webdeveloper.com/forum/archive/index.php/"....." CLASS="AACTIVE">

all you need is that "class" atribute.<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_pseudo_classes.aspThis">http://www.w3schools.com/css/css_pseudo_classes.aspThis</a><!-- m --> might help you (though on my site (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/">http://www.ryanbrill.com/</a><!-- m -->), I used PHP, as I wanted it to do everything dynamically): <!-- m --><a class="postlink" href="http://www.hicksdesign.co.uk/articles/archives/000271.phpThanks">http://www.hicksdesign.co.uk/articles/a ... .phpThanks</a><!-- m --> all, and Happy Holidays.

I'll get my head around it after the anticipated hangover wears off tomorrow (or the next day).

CTB
 
Back
Top