> Is there any way to reset a link's state. In other words reset a visited
> link to an unvisited link. I guess the question I'm asking would be how do
> you programatically search and clear the history of a particular page?
I'm actually writing on-line CSS curriculum for my High School web class.
I'm doing a lesson on psuedo-classes and was looking for a way that I can
reset the links to demonstrate how the different declarations work whenever
a kid reloads the page.
> > Is there any way to reset a link's state. In other words reset a visited
> > link to an unvisited link. I guess the question I'm asking would be how do
> > you programatically search and clear the history of a particular page?
>
> You cannot access cache within the regular security restrictions. Why
> would not set link styles equal for both visited and unvisited?
Tim Williams - 30 Oct 2005 19:15 GMT
> I'm actually writing on-line CSS curriculum for my High School web
> class.
[quoted text clipped - 3 lines]
> whenever
> a kid reloads the page.
Jim,
You could try using different links each time the page loads. Use js
to append a random querystring to each URL (assuming the original
hrefs do not already have one....)
Untested but I think that should be enough for the browser to see them
as new links.
Tim.
VK - 30 Oct 2005 19:22 GMT
> I'm actually writing on-line CSS curriculum for my High School web class.
> I'm doing a lesson on psuedo-classes and was looking for a way that I can
> reset the links to demonstrate how the different declarations work whenever
> a kid reloads the page.
This task is not such trivia and depending on the level of your class
you may want to choose a set of separate pages instead.
Pseudo-classes are not directly exposed for scripting: thus you cannot
apply something like linkObject.style.aHoverColor = newColor;
The way around it is in using imported style sheets and switching them
at runtime. This approach is demonstrated below. Please not that:
1) It doesn't work for all browsers (actually tested on IE only). See
<http://alistapart.com/articles/alternate/> for other solutions. They
are all based on the same idea but using other methods.
2) You have to create two additional files defaultLinkStyles.css and
newLinkStyles.css
Their content follows the page text.
// HTML Page
<html>
<head>
<title>Dynamic Link Style</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
@import url('defaultLinkStyles.css');
body { background-color: #FFFFFF;}
p { font: 10pt Verdana, Geneva, sans-serif}
</style>
<script style="text/javascript">
function f1() {
try {
document.styleSheets[0].imports[0].href =
'newLinkStyles.css';
}
catch (e) {
alert(e.description);
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
<p><a href="http://www.google.com">http://www.google.com</a></p>
<p><a
href="http://www.For_Sure_Not_Viewed_Yet.com">http://www.For_Sure_Not_Viewed_Yet.com</a></p>
<p><a
href="http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets?lnk=li
&hl=en">comp.infosystems.www.authoring.stylesheets</a></p>
<form method="post" action="">
<input type="button" name="b01" value="Switch" onclick="f1()">
</form>
</body>
</html>
// defaultLinkStyles.css
a:active { color: #FF0000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive.
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #FF0000 !important; text-decoration: underline}
a:link { color: #0000FF; text-decoration: underline}
a:visited { color: #800080; ; text-decoration: underline}
// newLinkStyles.css
a:active { color: #000000; text-decoration: underline}
/* a:visited color rule has higher priority over
a:hover if viewed from your local drive.
To fix this bug (feature?) one should use
additional !important instruction: */
a:hover { color: #00FF00 !important; text-decoration: underline}
a:link { color: #FF0000; text-decoration: underline}
a:visited { color: #FFFF00; ; text-decoration: underline}
VK - 31 Oct 2005 00:51 GMT
> /* a:visited color rule has higher priority over
> a:hover if viewed from your local drive.
> To fix this bug (feature?) one should use
> additional !important instruction: */
> a:hover { color: #FF0000 !important; text-decoration: underline}
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse
_frm/thread/936a815501359f6b/acf6ca9f1904599c?hl=en&>
> Why would not set link styles equal for both visited and unvisited?
Because that is one of the most incompetent things a Web site responsible
could do.
PointedEars