Log in

View Full Version : CSS problem on tables?


therigster_2002
11-02-2006, 07:54 PM
have 10 different tables composed of 3 pictures that produce 1 button, so 1table is 1 button. I had to use separate tables because that was the only it would fit nicely. We're using frames!

What i want is when our home page is loaded for the background of or our home button which is the first table to change is background color.(to 000066). When i click on a new button I need the background of that color to change to 000066 and the previous button that was clicked or had it's background changed to change back to the original background color which is 669AFF. I just want to show which links our group will be in. We are working on a project for school and we have to update it for each iteration we complete. Any assistance would be glady appreciated. I'm researching nodes and javascript because i think that is what you need to use, but i'm still uncertain.

original color: 669AFF
loading the homepage and clicking on buttons(or tables) color: 000066

heres my html:

<html>
<body>

<style type="text/css">
<!--
A.MenuBarItems {text-decoration:none;}
A.MenuBarItems:Hover{color: #ffffff;}
A img {border: none;}

BODY
{
background-image:url(../../img/menu_bar_bck.jpg);
background-repeat:repeat-y;
background-position:192px 0px;
}
-->
</style>


<html>

<head>
<title>Team 2 - Menu</title>

</head>

<body BGCOLOR="669AFF">

<div align="center">

<img src="http://204.158.158.14/current/se44602/img/menubarRev.jpg" alt="menu pic" width="170" height="95"/>

<br>

<table onload="this.style.backgroundColor='#000066'" >
<tr>
<td><img src="http://204.158.158.14/current/se44602/img/BulletLeft.gif" border="0"></td>
<td><a href="main.htm" class="MenuBarItems" target="mainwindow" title="Home"><img src="http://204.158.158.14/current/se44602/img/homebutton.jpg" alt="home button" width="140" height="40"/></a></td>
<td><img src="http://204.158.158.14/current/se44602/img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="ProjectPlan/ProjectPlan.html" class="MenuBarItems" target="mainwindow" title="Project Plan"><img src="../../img/projectPlanbutton.jpg" alt="project plan button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="RequirementsAnalysis/Analysis.html" class="MenuBarItems" target="mainwindow" title="Requirements/Analysis"><img src="../../img/reqAnalysisbutton.jpg" alt="requirements analysis button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="Design/Design.html" class="MenuBarItems" target="mainwindow" title="Design"><img src="../../img/designButton.jpg" alt="design button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="TestPlanTestReport/TestPlan.html" class="MenuBarItems" target="mainwindow" title="Test Plan/Test Report"><img src="../../img/testPlanbutton.jpg" alt="test plan and test report button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>


<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td>
<a href="ArchitectureBaseline/Architecture.html" class="MenuBarItems" target="mainwindow" title="Architecture Baseline"><img src="../../img/arhitectureButton.jpg" alt="architecture baseline button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="UsersManual/manual.html" class="MenuBarItems" target="mainwindow" title="User's Manual"><img src="../../img/usermanualButton.jpg" alt="user's manual button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="../../src/Code.htm" class="MenuBarItems" target="mainwindow" title="Code"><img src="../../img/codeButton.jpg" alt="code button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>

<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"/></td>
<td><a href="Presentation/Present.htm" class="MenuBarItems" target="mainwindow" title="Presentation">
<img src="../../img/presentationButton.jpg" width="140" height="40" alt="presentation button"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"/></td>
</tr>
</table>


<table >
<tr>
<td><img src="../../img/BulletLeft.gif" border="0"></td>
<td><a href="../../team/Meetings/meetings.htm" class="MenuBarItems" TARGET="mainwindow" TITLE="Meetings"><img src="../../img/meetingbutton.jpg" alt="meetings button" width="140" height="40"/></a></td>
<td><img src="../../img/BulletRght.gif" border="0"></td>
</tr>
</table>


<br><br><br><br>

<h5>Click on the names to view their progress report</h5>


<a href="../../team/DM/main.htm" class="MenuBarItems" target="mainwindow" title="Daniel Mancha Progress Reports">
Daniel Mancha
</a>
&nbsp
<A HREF="mailto:dmad_mancha@sbcglobal.net" class="MenuBarItems" title="Send Mail To Daniel Mancha">
<img src="../../img/envelope.gif" alt="mail pic" HEIGHT="8" WIDTH="16" BORDER="0">
</a>

<br>

<a href="../../team/RM/main.htm" class="MenuBarItems" target="mainwindow" title="Rigo Muniz Progress Reports">
Rigo Muniz
</a>
&nbsp
<A HREF="mailto:therigster_2002@yahoo.com" CLASS="MenuBarItems" TITLE="Send Mail To Rigo Muniz">
<IMG SRC="../../img/envelope.gif" alt="mail pic" HEIGHT="8" WIDTH="16" BORDER="0">
</A>

<BR>

<a href="../../team/ER/main.htm" class="MenuBarItems" target="mainwindow" title="Edmundo Rey Progress Reports">
Edmundo Rey
</a>
&nbsp
<A HREF="mailto:erey@eched.org" class="MenuBarItems" title="Send Mail To Edmundo Rey">
<img src="../../img/envelope.gif" alt="mail pic" HEIGHT="8" WIDTH="16" BORDER="0">
</A>

<br>

<a href="../../team/RS/main.htm" class="MenuBarItems" target="mainwindow" title="R. Aaron Shaw Progress Reports">
R. Aaron Shaw
</a>
&nbsp
<A HREF="mailto:shaw_r238@utpb.edu" CLASS="MenuBarItems" title="Send Mail To R. Aaron Shaw">
<img src="../../img/envelope.gif" alt="mail pic" HEIGHT="8" WIDTH="16" BORDER="0">
</A>

<br>

<a href="../../team/JY/main.htm" class="MenuBarItems" target="mainwindow" title="Josh Young Progress Reports">
Josh Young
</a>
&nbsp
<A HREF="mailto:anticrombie_6969@yahoo.com" CLASS="MenuBarItems" title="Send Mail To Josh Young">
<img src="../../img/envelope.gif" alt="mail pic" HEIGHT="8" WIDTH="16" BORDER="0">
</A>




</div>

<p align="center">
<font color="blue"> <script language="JavaScript">
<!--//
document.write("<i>"+"Last Updated -"
+document.lastModified + "</i>");
//-->
</script> </font>
</p>

</body>

</html>

<!--oct 11th: (RSM)- adding alt to mail pics; not a big issue-->


<!--Revision History
09SEP2006(0315) - (RAS)Created
14SEP2006(1900) - (RAS)Posted on Server
20SEP2006(0010) - (RAS)Added Links to Reports&Team members
20SEP2006(0041) - (RAS)Added MailToForm Links
02OCT2006(0001) - (RAS)Updated
OCT 11th (2006) - (RSM)opening html and body tags and form email
OCT 19th (2006) - (RSM)adding button to page for aaron to finish what he's doing
waynep
11-07-2006, 11:07 AM
i think your could acheive this a lot easier using div tags and not tables, your on the right lines by using css