Change image src for visited link

Question

I have a list with several entries.

<ul>    
<li>
    <a href="http://url" title="The Title">
    <img src="/badge-unvisited.png" alt="" border="0" />
    </a>
</li>
<!-- etc. -->
</ul>

I don't want to use jQuery, so it needs to be CSS-only. What is the best and easiest way to change the src of the image when it was visited?

Answer 1

Afaik, you can't change the image src just with css.

But you could just make it a background-image of a same-sized and then use the :hover class like

div {
    background-image:url(default.jpg);
}

div:visited {
    background-image:url(changed.jpg);
}

Btw an even niftier solution would be to use the same image including both states and just changing the background-position. That way there's less load. Look for 'css sprites' if you are interested in more!

Answer 2

What is the best and easiest way to change the src of the image when it was visited?

There is none. The src property of an image is out of scope for CSS.

You will have to work with background-image properties instead.

You could theoretically have two images and show one at one time, and the other at the next using display: none, but that is pretty kludgy and causes both images to be loaded.

Answer 3

At least in Webkit and Firefox this is not possible, since styling of visited links allows for various attack scenarios.

http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
https://bugzilla.mozilla.org/show_bug.cgi?id=147777
https://bugs.webkit.org/show_bug.cgi?id=24300

Answer 4

You can alter properties for the image like this:

ul li a:visited img { border:10px }

But to change the source itself you have to get creative. either replace the image with a element having a background image or, if you don't have to support older browsers you could use generated content, like this:

ul li a:after { content:url(image.gif); }

and then

ul li a:visited:after { content:url(image-2.gif); }

Answer 5

css can't modify the dom, what I could suggest is setting a background image, and then hiding the img

a{background-image:url(badge-visited.png);width:50px;height:50px;}
a:visited img{display:none;}