[snip]
BEFORE: <a
href="javascript:change_frames('photo','text')">me</a><br>
In case you're wonder what the actual problem was with this...
As you know, when a user clicks on a link, the browser attempts to
download the resource indicated by the URI. The browser's assumption is
that the resource will completely replace the current document (unless the
URI *is* the current document, of course), so most makes quite a sensible
decision: stop doing things. "Things" can be executing scripts, rendering
animation, or downloading data (such as images) for the now outgoing page.
As mentioned in the FAQ, the javascript URI scheme was originally intended
to do what a link normally does - replace the current page - so browsers
often act the same as they would with any other URI and stop what they
deem "pointless" activities.
AFTER: <a href="#"
onClick="change_frames('photo','text'); return false">me</a><br>
The link isn't marked as visited, because it already has been visited. The
URI refers to the current page so, if anything, the link should already be
rendered as you want.
A possible solution would be to add code to the click event listener that
manipulates the class attribute of the link. For example:
/* Script */
function markVisited(elem) {
elem.className = 'visited';
}
/* CSS Rule */
a:visited,
a.visited {
/* Set the color and background-color properties */
}
<a href="#"
onclick="markVisited(this);change_frames(....);return false">
This will only be a temporary effect. If the page is reloaded, the
appearance will revert to how it was originally. If you already have class
attributes set on some of the links, you'll need to modify the markVisited
function (commented so you see what's happening):
function markVisited(elem) {
/* Get the current value of the class attribute and set the
* value that we're going to add.
*/
var cN = elem.className, v = 'visited';
/* If the className property isn't a string, then quit now: we
* can't do anything. If it is, check that we haven't already
* added the new string.
*/
if(('string' == typeof cN) && (-1 == cN.indexOf(v))) {
/* If the attribute already contains values, prepend a space
* before appending the new string.
*/
if(cN) {v = ' ' + v;}
/* Modify the attribute. Notice that we're now working on the
* real thing. The local variable was just for speed.
*/
elem.className += v;
}
}
However, you'll probably find that this won't result in a change as the
link should already be visited (as I said, the URI refers to the current
page). In such a case, the solution is to first set the link appearance to
the way you want when the page loads, then change it (as above), to the
visited appearance.
/* Call from the load event:
* <body onload="markVisited()">
*/
function markUnvisited() {
var a = document.links || [];
for(var i = 0, n = a.length; i < n; ++i) {
addClassValue(a
, 'unvisited');
}
}
/* Call as in previous example. */
function markVisited(elem) {
addClassValue(elem, 'visited');
}
function addClassValue(elem, value) {
var cN = elem.className;
if(('string' == typeof cN) && (-1 == cN.indexOf(value))) {
if(cN) {value = ' ' + value;}
elem.className += value;
}
}
/* CSS Rules */
a:link,
a.unvisited {
/* Unvisited properties. */
}
a:visited,
a.visited {
/* Visited properties. */
}
All this is untested, by the way, so tell me if you have problems.
[snip]
Good luck,
Mike
