Question

I have a image-hyperlink. And I want to change the image when the link have status visited. Could you show me how to do it? Preferably without using JavaScript.

I’m trying to do the following: I joined both my images in single common image and here is my code:

<a href="#" class="mylink">
   <img src="common_image.jpg" width="240px" height="240px"/>
</a>

And my styles:

    .mylink {
        width: 120px;
        height: 240px;
        display: block;
        overflow: hidden;
    }

    .mylink:visited img {
        margin-left: -120px;
    }

Answer 1

You cannot alter the src-attribute of an image throught CSS. If it, for some reason, have to be an img-element, then you are stuck with JavaScript for the alteration.

The other alternative would be to get rid of the img-element and use only the anchor with a background instead. The background-property can be controlled through CSS.

Here is a simple example of how to do it for :hover, but in you case :hover could just as easy be changed to :visited instead.

If you place the “visited”-image below the default image in a file called sprite.png, the code would be:

a.mylink {
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
    background: url(sprite.png) no-repeat;
}

a:visited.mylink {
    background-position: 0 -240px;
}

See it live here: http://jsfiddle.net/5ZzkY/ (Uses background-color instead of image for simplicity)