Solved

How to change color of the background tab?

Posted on 2001-07-24
26
176 Views
Last Modified: 2008-02-26
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>&nbsp;
               </td>
               </tr>
          </table>
     </td>

     <td width="1%">&nbsp;</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>&nbsp;
          </td>
          </tr>
          </table>
     </td>

     <td width="1%">&nbsp;</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>&nbsp;
          </td>
          </tr>
          </table>
     </td>

     <td width="1%">&nbsp;</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>&nbsp;
          </td>
          </tr>
          </table>
     </td>

     <td width="1%">&nbsp;</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>&nbsp;
          </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>
 
0
Comment
Question by:sdesar
  • 14
  • 7
  • 3
  • +2
26 Comments
 

Author Comment

by:sdesar
ID: 6314616
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?
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6315015
try

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

J
0
 

Author Comment

by:sdesar
ID: 6315085
where should I add this onClick... with in the <td>?
0
 

Author Comment

by:sdesar
ID: 6315120
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?
0
 

Author Comment

by:sdesar
ID: 6315527
Awaiting a response please!
0
 
LVL 2

Expert Comment

by:thor918
ID: 6315535
what browser are you using?
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6316428
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
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6316452
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
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6316485
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
0
 
LVL 2

Expert Comment

by:thor918
ID: 6316910
This only works in explorer
0
 

Author Comment

by:sdesar
ID: 6318299
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.
0
 

Author Comment

by:sdesar
ID: 6318450
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.
0
 

Author Comment

by:sdesar
ID: 6319144
It does not work on Netscape at all both unix and windows versions.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:sdesar
ID: 6319359
Awaiting suggestions!
0
 

Author Comment

by:sdesar
ID: 6319506
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>
0
 

Author Comment

by:sdesar
ID: 6320012
Awaiting a response.. anyone!
0
 
LVL 2

Expert Comment

by:thor918
ID: 6320038
I've heard that it's impossible to get this to working with netscape.

But somebody can probaly make work it anyway...
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6320114
sorry, haven't been able to test on netscape yet. get back to you soon
0
 

Author Comment

by:sdesar
ID: 6320354
Okay .. thanks.. look forward to reading a response soon..!
0
 
LVL 3

Expert Comment

by:nzjonboy
ID: 6320643
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">
<!--

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function layerWrite(id,nestref,text) {
     if (ns4) {
          if (nestref) var lyr = eval('document.'+nestref+'.document.'+id+'.document')
          else var lyr = document.layers[id].document
          lyr.open()
          lyr.write(text)
          lyr.close()
     }
     else if (ie4) document.all[id].innerHTML = text
}

link = new Array()
link[0] = new Array('link0Div','link1.html','Link 1',false)
link[1] = new Array('link1Div','link2.html','Link 2',false)
link[2] = new Array('link2Div','link3.html','Link 3',false)
link[3] = new Array('link3Div','link4.html','Link 4',false)

function linkOver(num) {
     if (ns4) {
          for (var i=0;i<link.length;i++) {
               if (link[i][3]==true) linkOut(i)
          }
     }
     link[num][3] = true
     layerWrite(link[num][0],null,'<A CLASS="red" HREF="'+link[num][1]+'" onMouseOut="linkOut('+num+')">'+link[num][2]+'</A>')
}

function linkOut(num) {
     link[num][3] = true
     layerWrite(link[num][0],null,'<A CLASS="blue" HREF="'+link[num][1]+'" onMouseOver="linkOver('+num+')">'+link[num][2]+'</A>')
}

//-->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
A.blue {color:blue;}
A.red {color:red;}
#link0Div {position:absolute; left:100; top:50;}
#link1Div {position:absolute; left:200; top:50;}
#link2Div {position:absolute; left:300; top:50;}
#link3Div {position:absolute; left:400; top:50;}
-->
</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
0
 

Author Comment

by:sdesar
ID: 6322747
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.
0
 
LVL 3

Accepted Solution

by:
nzjonboy earned 15 total points
ID: 6325510
I have gotten the cells to change color by using this code, there are however a few bugs. here's the code

<html>
<head>

<style><!--
.relative { position:relative; }

     a {
          color:#000000;
     }
     a:visited {
          color:#000000;
     }
     a:link {
          color:#000000;
     }
     a:hover {
          color:#000000;
     }

//--></style>

<script language="JavaScript"><!--
var colors= new Array('#ff0000','#00ff00','#0000ff');

function change(i) {
    if (document.layers) {

          for(var j=0; j<3;j++) {
               if (j==i)
                window.document.layers['id' + i].bgColor = "#336699";
               else
                window.document.layers['id' + j].bgColor = "#808080";
          }
     }
    else if (document.all) {
          var fTD = document.all.tags("TD");

          for(var j=0; j < fTD.length;j++) {
               if (j==i)
                window.document.all['id' + i].style.background = "#336699";
               else
                window.document.all['id' + j].style.background = "#808080";
          }
     }
}
//--></script>

</head>

<body>

<table>
<tr>
<td width=50 id="id0" bgcolor="#808080" class="relative"><a href="#" onclick="change(0);">test0</a></td>
<td width=50 id="id1" bgcolor="#808080" class="relative"><a href="#" onclick="change(1);">test1</a></td>
<td width=50 id="id2" bgcolor="#808080" class="relative"><a href="#" onclick="change(2);">test2</a></td>
</tr>
</table>

</body>
</html>


hope this helps

J
0
 

Author Comment

by:sdesar
ID: 6327651
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
0
 

Author Comment

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

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

Thanks.

0
 

Expert Comment

by:teacher_mod
ID: 6331898
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
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 6331951
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:  http://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.

0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now