Changing text color or css style

laythss · #1 10-30-2004, 02:58 PM

hello all, I hope I can get help here. I am newbie in java script and I am trying to do the following:
I have a navigation bar on my website (made of link text, the color of the text is defined by a css style, in any case the text is white when the page loads and is red when it gets rolled over) What I want is when a vistor for example presses the "machine" button and gets directed to the page "machine.asp" which displays the same navigaton, I want the text for the link "machine" on my navigation to change to red for example and stay that way, that way the visitor will know what page s/he is on.
structure of website:
Each page (home.asp, machine.asp, ingredients.asp, etc.) includes a header called (head.asp) and a footer (foot.asp)
http://www.always-coffee.com/web2/index.asp

What I did:
I added the following javascript in head.asp:





Now here is my problems (or what I think My problems is):

2- now if I get the first part right, then I can add more if statments to include all websites for the navigation part. BUT my biggest problem, is how do I get the text change color if the value of the variable nav="main" for example. AND where do I place that code in my document. PLEASE HELP. and I thank you in advance.
Layth

Charles · #2 10-30-2004, 03:35 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head>
<body>
<ul>
<li><a href="test.html">Test</a></li>
<li><a href="http://www.w3.org/">W3C</a></li>
</ul>
</body>
</html>

laythss · #3 10-30-2004, 07:29 PM

I am not sure how that code works but I tried it out and it works as the example but how do I add it to my links at my nav, my code right now for these buttons is:

<table cellpadding="0" cellspacing="0" border="0" width="1020">
<tr bgcolor="#66CC00">

<td width="196" align="center" bgcolor="#66CC00" class="backnavgray"><span class="nav"><a href="index.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Home</a></span></td>
<td width="54" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_machine.asp" class="nav style7" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Machine</a></span>

</div></td>
<td width="73" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_machine_espresso_coffee_ingredients.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Ingredients</a></span></div></td>
<td width="64" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_machine_selections.asp" class="style4" onMouseOver="this.className='navon'" onMouseOut="this.className='nav'">Selections</a></span></div></td>
<td width="111" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_solution_coins_dollars_free_payment.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Payment<span class="style5">_</span>Options</a></span></div></td>
<td width="74" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_solution_service.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Our<span class="style5">_</span>Service</a></span></div></td>
<td width="47" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_machines_contact.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Contact</a></span></div></td>
<td width="68" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_emergencycontact2.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Emergency</a></span></div></td>
<td width="29" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><span class="nav"><a href="always_coffee_office_machines_jobs.asp" class="style4" onMouseOver="this.className='navon';" onMouseOut="this.className='nav';">Jobs</a></span></div></td>
<td width="38" align="center" bgcolor="#FFFFFF" class="backnavgray"><div align="center"><a href="always_coffee_office_machine_aboutus.asp" class="style4" onMouseOver="this.className='navon'" onMouseOut="this.className='nav'">About</a></div></td>
<td width="40" align="center" bgcolor="#FFFFFF" class="backnavgray"> </td>
</tr></table>

At least can some one just right for me how the code in the past post actually work. Many thanks for any help.
Layth

Charles · #4 10-30-2004, 07:33 PM

You mkght be able to wrestle that thing into cooperating but you would do best to get rid ofthe table, use CSS for layout and presentation and go with HTML 4.01 Strict. You'll at least have to use CSS for the presentation for my method to work.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)