Create/Load page based on visited state of embedded links

Question

I want to set two icons in a page based on URL not visited or visited. The icons are the same except their color matches unvisited and visited links color.

I have read the articles on security related to browser restricting access to visited links.

I've tried using CSS and the background-image, but it didn't work using

a:visited {background-image: green-icon.ico;}

So I tried checking for the color of the links to set the appropriate icon. Debugging in Chrome always shows the color of the link as "".

Is there any technique (including so-called hack) to do this javascript psuedo-code:

    if (link previously visited)
      set image to green-icon
    else
      set image to yellow-icon

Oh, and those links are just named anchors (href="#somelocalanchor") and not external urls.

Answer 1

This is what I initially had:

<a>Play<img src="speaker-yellow.png" onclick="playClicked()"></a>

which would show the Play followed by a yellow speaker icon.

If the user clicked the link, the word "Play" changes to the link-visited color (green).

I also wanted the yellow speaker icon to be replaced with a green speaker icon and this visited state to be kept even when the page or browser is exited.

With javascript function "playClicked", I was able to change to the green speaker icon when the link is clicked. However, this is not maintained across page or browser sessions - the (unvisited) yellow speaker icon is displayed with the visited colored "Play" when the page is reentered.

After again reading the MDN doc restrictions on "visited" and what was allowed, I saw that "fill" and "stroke" are changeable (for colors), which got me into SVG, which in turn led me to find a post on changing SVG colors and the solution to my problem.

1. Use "fill:currentColor" or "stroke:currentColor" in the SVG definition.

• This uses the color of the context font, in my case the link.

2. CSS class as usual for links color (if custom color needed as in my case)

a:link {color:#ffcc00;}
a:visited {color:#00ff00;}
a:active {color:#ff0000;}

Works great (though required some reading up on sizing SVG and the effects of width, height, and viewBox changes).