changing a link color back to unvisited

platypus55 · Sep 7, 1999

I kind of think you can't do this but thought I'd ask anyway. 
Suppose you have a link on a background which matches the linking color. Once you click it, it changes to the vlink color and becomes visible. But on reloading the page, how 
can I set it so that it reverts to the unvisited link color. 
 
Or barring that, is there anyway to change the background color of a table after you have done it. I need this text to alternate between being visible and invisible when you click a button. 
 
I don't know DHTML yet.

robherc · Sep 7, 1999

couldn't you just skip the link/vlink thing & change the text colors using a CSS style tag & onClick JS events to trigger the color changes? Alternatively; you could name the table (i.e. <table name=tab1 bgcolor=fffff0&gt

then use a JS onClick like: <a href=# onClick="document.tab1.bgcolor=00000f">Link Text Here</a> 
 
 
just a couple of quick suggestions; good luck. 
 
 
-Robherc 
robherc@netzero.net

jfriestman · Sep 8, 1999

Forget about JavaScript for this effect... the easiest way to accomplish this is to use CSS to set the link colors so they never change. 
 
For example... 
Put this in the <HEAD> of your document, all your links, visited or not, will be medium blue, when you mouse over them (IE only), the link will turn light blue, when the link is active it will be Navy blue and the links will not be underlined. 
 
<STYLE type="text/css"> 
a:link {color: MediumBlue; font-family:arial; text-decoration:none; font-size:0.9em;} 
a:visited {color: MediumBlue; font-family:arial; text-decoration:none; font-size:0.9em;} 
a:active {color: Navy; font-family:arial; text-decoration: none; font-size:0.9em;} 
a:hover {color:CornflowerBlue; font-family:arial; text-decoration: none; font-size:0.9em;} 
</STYLE> 
 
Okay, so that makes for a nice effect, your question was more "how do I change the link color when the user clicks them" but have them reload back in the original color... 
 
Here's how to do it with JavaScript: 
 
<script language="JavaScript"> 
fnRefreshLinkColor { 
} 
</script> 
 
Put this in your body tag: 
<body onload="fnRefreshLinkColor();">

platypus55 · Sep 8, 1999

Thanks everybody, I guess I might as well bite the bullet and do it the CSS way. that's the wave of the future and it looks the most elegant. 
 
It's so great to have these CSS code fragments for just exactly what I want to do. Thanks again!!!

platypus55 · Sep 13, 1999

Hi, it's me again. I tried changing the background color of a table after the fact, but that didn't work; it basically just didnt do anything. I didn't think you can do that, or maybe it was just a joke.

I guess I should back off and say what I'm actually trying to accomplish here. I randomly choose a question and it's answer from a database and write them to a web page (done with cgi in case it matters). I want the answer to be invisible. Making the font of it white would do that. I want a button that says "Click here to see the answer" I do control the cgi, so I can make it write whatever I want. 
 
The answer really isnt a link at all, so forget the link color idea. I would like some CSS code to make the text of the answer change color when the user clicks the button. 
 
If the user reloads the page, the cgi will choose a different 
questin and answer, hopefully with a white-text answer. 
 
I know Javascript, but I am new to CSS, so please keep this in mind when giving your response. Thank you all very much!!

jfriestman · Sep 14, 1999

Although it is possible to use a white font color to hide text, it makes more sense to use the CSS properties "visibility" and/or "display" (there's a subtle difference, check it out.) 
 
The code sample below will demonstrate how to use both the visibility property and the background color & color properties to manipulate the display of a table data cell. 
 
Note: I whipped this code together in about a minute so forgive the structure. If you use it or something like it, consider encapsulating the display toggling into a single function and test for visibility. Additionally, this code is IE only. You can achieve the same effect with Netscrap but the Object Model is a little different (and much poorer) so have fun. 
 
-------------------------- 
 
<html> 
<head> 
<title></title> 
 
<script language="JavaScript"> 
 
function fnShowAnswers () { 
document.all.tdAnswer.style.visibility = "visible"; 
document.all.tdAnswer.style.backgroundColor = "black"; 
document.all.tdAnswer.style.color = "white"; 
document.all.tdQuestion.style.backgroundColor = "white"; 
document.all.tdQuestion.style.color = "black"; 
} 
function fnHideAnswers () { 
document.all.tdAnswer.style.visibility = "hidden"; 
document.all.tdAnswer.style.backgroundColor = "white"; 
document.all.tdAnswer.style.color = "black"; 
document.all.tdQuestion.style.backgroundColor = "black"; 
document.all.tdQuestion.style.color = "white"; 
} 
</script> 
 
<style type="text/css"> 
#tdQuestion { 
background-color:black; 
color:white; 
} 
#tdAnswer { 
visibility: hidden; 
} 
</style> 
 
</head> 
<body> 
 
 
<table width="50%" cellpadding="3" cellspacing="0" border="1"> 
<tr> 
<td id="tdQuestion" width="60%">Which is more fun, CGI or ASP?</td> 
<td id="tdAnswer" width="*">ASP of course!</td> 
</tr> 
</table> 
 
<form> 
<input type="button" value="Show Answer" onclick="fnShowAnswers();"> 
    
<input type="button" value="Hide Answer" onclick="fnHideAnswers();"> 
</form> 
 
</body></html>

platypus55 · Sep 14, 1999

Thanks!! I think I can have some fun with that. A lot of people still use Netscape, I wish those two browsers would get it together.

platypus55 · Sep 18, 1999

I tried the code above in Vn 4.5 of MSIE for Macintosh (which is what I have.) The answer is invisible, and it is in the page source, but clicking the show button does not make it visible for me even though the logic appears to be flawless. Is it because it's Macintosh? 
 
This code is at

http://www.platypus-share.com/tease.html

A. How can I make this thing work? 
B. How can I refine it to make it xplatform, I really do try to make my site accessible for everybody.

platypus55 · Oct 5, 1999

I just tried it on MSIE 5 on Windows and it doesn't work there either.

robherc · Oct 7, 1999

OK....here's a simple JavaScriptlet that'll write the answer on-screen after the button has been pressed....inster the following into your document IN PLACE OF the normal <a href=whatever.foo></a> that surrounds the button. 
 
<a href=# onMouseClick="document.writeln(' Your Answer Here')"></a> 
 
This should work on MSIE & Netscape versions 4+ on any platform (but watch Netscape v4.0 & I.E. 3.0-4.0....sometimes buggy) -Robherc <a href=mailto:robherc@netzero.net>robherc@netzero.net</a> <a href= > </a> *nix installation & program collector/reseller. Contact me if you think you've got one that I don't

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

changing a link color back to unvisited

platypus55

Programmer

robherc

Programmer

jfriestman

Programmer

platypus55

Programmer

platypus55

Programmer

jfriestman

Programmer

platypus55

Programmer

platypus55

Programmer

platypus55

Programmer

robherc

Programmer

Similar threads

Part and Inventory Search

Sponsor