asked on

How to change color of the background tab?

I would like to know hoe can I change the color of the anchor and make the background grey when the user clicks n it?

Here's the code:-
<html>
<head>

<title>Hello!</title>
</head>
<body bgcolor="ffffff">

<center>

<br>
<table border=0 width="100%" cellspacing=0 cellpadding=0>
<tr>
<td align=center bgcolor="dcdcdc" width="20%">
<table border=0 width="100%" cellspacing=0 cellpadding=2>
<tr align=center>
<td><a href="/servlet/Servlet/forwardto?destination=issue" target="detail">
<font face=Arial size=-1 color="000000">submit</font></a> 
</td>
</tr>
</table>
</td>

<td width="1%"> </td>
<td align=center bgcolor="336699" width="20%">
<table bgcolor="336699" border=0 width="100%" cellspacing=0 cellpadding=2>
<tr align=center>
<td><a href="/jsp/Query.jsp" target="detail">
<font face=Arial size=-1 color="000000">search</font></a> 
</td>
</tr>
</table>
</td>

<td width="1%"> </td>
<td align=center bgcolor="336699" width="20%">
<table bgcolor="336699" border=0 width="100%" cellspacing=0 cellpadding=2>
<tr align=center>
<td><a href="/jsp/User.jsp" target="detail">
<font face=Arial size=-1 color="000000">comments</font></a> 
</td>
</tr>
</table>
</td>

<td width="1%"> </td>
<td align=center bgcolor="336699" width="20%">
<table bgcolor="336699" border=0 width="100%" cellspacing=0 cellpadding=2>
<tr align=center>
<td><a href="/jsp/Faq.html" target="detail">
<font face=Arial size=-1 color="000000">help</font></a> 
</td>
</tr>
</table>
</td>

<td width="1%"> </td>
<td align=center bgcolor="336699" width="20%">
<table bgcolor="336699" border=0 width="100%" cellspacing=0 cellpadding=2>
<tr align=center>
<td><a href="/jsp/Change.jsp" target="detail">
<font face=Arial size=-1 color="000000">search</font></a> 
</td>
</tr>
</table>
</td>

</tr>
<tr>
<td width="100%" colspan=10>

<table border=0 cellspacing=0 width="100%"><tr><td bgcolor="336699">
<table border=0 cellspacing=0 cellpadding=0>
<tr><td height=3></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

</body>
</html>

sdesar

ASKER

I was thinking of creating a style sheet-

.tdlink{ background: #808080}
.tdactive{ background: #336699}

and then the td tag

<td align=center width=20% class="tdlink">

Question is : - how can I get this class to change from "tdlink" to "tdactive" when the user clicks on the anchor?

nzjonboy

try

onclick="this.style.background=#33669"

J

sdesar

ASKER

where should I add this onClick... with in the <td>?

sdesar

ASKER

This is what I did:-

<td align=center width=20% class="tdlink" onclick="this.style.background=#336699"
>

It did NOT work... some how I need to change the color of the td tag when the user clicks on the anchor that is within it from class="tdlink" to class="tdactive"

what else can I try?

Any suggestions either JSP or JavaScript?

sdesar

ASKER

Awaiting a response please!

thor918

what browser are you using?

nzjonboy

the reason the above suggestion i made didn't work is because of the class setting. if you remove class="tdlink" from the <td> then try the click event it should work. I will look further into how to get it to work the way you want. sorry for the delay in my reply just got home from work :)

J

nzjonboy

here we go.

<html>
<head>
<script language="javascript">
function changeClass(x) {
if(x.style.background == "#336699")
x.style.background = "#808080";
else
x.style.background = "#336699";
}
</script>
<style>
.tdlink{ background: #808080}
</style>
</head>
<body>
<table border=1>
<TR><TD>test cell 1</TD></TR>
<TR><TD class="tdlink" onclick="changeClass(this);">test cell 2 - click me</TD></TR>
</table>

</body>
</html>

J

nzjonboy

ok, revised the code, now you can use different classes. if you want you could define more than two classes and use a switch statement to cycle through the styles.

here's the code

<html>
<script>
function changeClass(myid){
x = document.all[myid].className
if(x=="tdlink")
document.all[myid].className="tdactive"
else
document.all[myid].className="tdlink"

}
</script>
<style>
.tdlink{
background:#808080;
}
.tdactive{
background:#336699;
}
</style>

<body>
<table border=1>
<tr><td id="myid1" class="tdlink" OnClick="changeClass('myid1')">AAAA</td></tr>
<tr><td id="myid2" class="tdlink" OnClick="changeClass('myid2')">BBBB</td></tr>
<tr><td id="myid3" class="tdlink" OnClick="changeClass('myid3')">CCCC</td></tr>
<tr><td id="myid4" class="tdlink" OnClick="changeClass('myid4')">DDDD</td></tr>
</table>

</body>
</html>

J

thor918

This only works in explorer

sdesar

ASKER

Yes.. both these suggestions work only on IE.

How can I make them work on Netscape on Iriix on a Unix machine that has Netscape 4.77?

Thanks for all the suggestions.

sdesar

ASKER

Also, when I cilck on
one cell 1 it gets the blue color.
But when I click on the next cell 2- this should get the blue color and
the color on cell 1 should go back to the default-grey.

How can I do that?

Also, I am increassing the points ... for all your efforts..thank you.

sdesar

ASKER

It does not work on Netscape at all both unix and windows versions.

sdesar

ASKER

Awaiting suggestions!

sdesar

ASKER

Here's the code that I added ... it detectes the browsers .. but nothing else works.... help please

// Global variables for browser versions and platform equivalencies
var isNav, isIE
var coll = ""
var styleObj = ""
if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
alert ('Netscpe');
isNav = true
} else {
alert ('IE');
isIE = true
coll = "all."
styleObj = ".style"
}
}

// API function for setting a positionable element's background color
function setBGColor(objIn, color) {
var obj = eval("document." + coll + objIn + styleObj)
if (isNav) {
obj.bgColor = color
} else {
obj.backgroundColor = color
}
}

function changeClass(myid){
var z = (isNav) ? Event.CLICK : window.event.button
z = document.all[myid].className
if (z=="tdlink"){
document.obj.bgColor.all[myid].className="tdactive"
} else {
document.obj.bgColor.all[myid].className="tdlink"
}

return false

}
</script>
<style>
.tdlink{
background:#808080;
}
.tdactive{
background:#336699;
}
</style>

<body>
<table border=1>
<tr><td id="myid1" class="tdlink" onMouseDown="return changeClass('myid1')" onClick="return false">AAAA</td></tr>
<tr><td id="myid2" class="tdlink" onMouseDown="return changeClass('myid2')" onClick="return false">BBBB</td></tr>
<tr><td id="myid3" class="tdlink" onMouseDown="return changeClass('myid3')" onClick="return false">CCCC</td></tr>
<tr><td id="myid4" class="tdlink" OnClick="changeClass('myid4')">DDDD</td></tr>
</table>

</body>
</html>

sdesar

ASKER

Awaiting a response.. anyone!

thor918

I've heard that it's impossible to get this to working with netscape.

But somebody can probaly make work it anyway...

nzjonboy

sorry, haven't been able to test on netscape yet. get back to you soon

sdesar

ASKER

Okay .. thanks.. look forward to reading a response soon..!

nzjonboy

just to give you an udpate as to where I am. To do this you will probably need to use divs (or spans) and use javascript to rewrite the html for these when a mouse click occurs. something like this.

<html>
<head>
<script language="JavaScript">

</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<DIV ID="link0Div"><A CLASS="blue" HREF="page1.html" onMouseOver="linkOver(0)">Link 1</A></DIV>

<DIV ID="link1Div"><A CLASS="blue" HREF="page2.html" onMouseOver="linkOver(1)">Link 2</A></DIV>

<DIV ID="link2Div"><A CLASS="blue" HREF="page3.html" onMouseOver="linkOver(2)">Link 3</A></DIV>

<DIV ID="link3Div"><A CLASS="blue" HREF="page4.html" onMouseOver="linkOver(3)">Link 4</A></DIV>

</BODY>
</HTML>

have a go with this, may need to change it. tell me where you get :)

J

sdesar

ASKER

I need the cell colors to change as you had in the script that you gave initailly.
THe cell colors change
Also, when I cilck on
one cell 1 it gets the blue color.
But when I click on the next cell 2- this should get the blue color and
the color on cell 1 should go back to the default-grey.

So I see that with the DIV ... The link color changes in both IE and Netscape.
However, is it possible to change the cell color also, how can I do that?

Thanks.

ASKER CERTIFIED SOLUTION

nzjonboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sdesar

ASKER

Its awesome, in Netscape its ok.

Thanks J for your efforts!

Is it possible for you to help me with anotherJavaScript Question that I have opened up? If so , I can send you the link.

Thanks

sdesar

ASKER

Here's the URL for the Javascript question i needed help on:-
https://www.experts-exchange.com/jsp/qManageQuestion.jsp?ta=javascript&qid=20136439

Would it be possible for you to help me on this question?

Thanks.

teacher_mod

sdesar,

You have a large nubmer of old open question. While you are on the site could you please take a few moments to update them, or bring them to closure.

TIA for helping to clean up the old questions.

teacher_mod
Community Support Moderator
Experts-Exchange
teacher_mod@experts-exchange.com

Moondancer

It's time to clean up this topic area and that means taking care of this question. Your options at this point are:

1. Award points to the Expert who provided an answer, or who helped you most. Do this by clicking on the "Accept Comment as Answer" button that lies above and to the right of the appropriate expert's name.

2. PAQ the question because the information might be useful to others, but was not useful to you. To use this option, you must state why the question is no longer useful to you, and the experts need to let me know if they feel that you're being unfair.

3. Ask Community Support to help split points between participating experts. Just comment here with details.

4. Delete the question because it is of no value to you or to anyone else. To use this option, you must state why the question is no longer useful to you, and the experts need to let me know if they feel that you're being unfair.

If you elect for option 2, 3 or 4, just post comment with details here and I'll take it from there. We also request that you review any other open questions you might have and update/close them. Display all your question history from your Member Profile to view details.

PLEASE DO NOT AWARD THE POINTS TO ME.

____________________________________________

Hi Experts:

In the event that the Asker does not respond, I would very much appreciate your opinions as to which Expert ought to receive points (if any) as a result of this question. Likewise, you can also suggest that I PAQ or delete the question.

Experts, please do not add further "answer" information to this question. I will be back in about one week to finalize this question.

Thank you everyone.

Moondancer :)
Community Support Moderator @ Experts Exchange

P.S. Engineering has been advised about the error in the comment date/time sort order. REGARDING POINTS and more: https://www.experts-exchange.com/jsp/cmtyHelpDesk.jsp
When using points to ask a question, you assign the point value of the question based on its difficulty. As a guide, a basic question is worth 50 question points, an intermediate question is worth 100 points, and an advanced question is worth about 200 points. The more question points assigned to a question, the more likely it is that it will be answered.

When you accept an Expert's solution as an answer, the question points you offered are deducted from your account. The Expert's score is increased by the sum of the number of points you offered for the question, multiplied by the grade you assigned to the answer. The Expert is then awarded Expert Points based on this score.