JimO wrote:
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& amp;hl=en">comp.infosystems.www.authoring.styleshe ets</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}
