CSS. Changing image visited link

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;
    }

How do you mean "you want to change the image"? Do you want to change the image source? — Christofer Eliasson, Apr 16 '12 at 09:26
I would look into using background-image and css sprites. This should point you in the right direction at least. You can use one image and switch the background-position on :visited. — Philip Bevan, Apr 16 '12 at 09:28

Christofer Eliasson · Accepted Answer · 2012-04-16T11:16:49.617

2

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)

edited Apr 16 '12 at 11:16

answered Apr 16 '12 at 09:45

Christofer Eliasson

32,939
7
74
103

Unfortunately your code didn't work. This solution is suitable for the status hover but not to visited. If replace visited by hover in my variant so it works well too – Michael Apr 16 '12 at 11:03
@Andrei Please see my updated CSS and example. It appears the right way to write the selector is `a:visited.myLink`. – Christofer Eliasson Apr 16 '12 at 11:19
@Andrei Does the fiddle work for you? Do you get a yellow background behind google and grey behind unvisited? – Christofer Eliasson Apr 16 '12 at 11:44

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Playing with :visited pseudo selector for background image don't work. There is a security limitation in major browsers to prevent snifing exploit. See this StackOverflow question

edited May 23 '17 at 11:56

Community

1
1

answered Oct 29 '12 at 10:52

MrSo

641
8
34

score 0 · Answer 3 · answered Apr 16 '12 at 09:35

0

You could remove the image and control the background through the css

.mylink {
    background:url('myimagepath-01.jpg') top left no-repeat;
    width: 120px;
    height: 240px;
    display: block;
    overflow: hidden;
}

.mylink:visited {
    background:url('myimagepath-02.jpg') top left no-repeat;  
}

answered Apr 16 '12 at 09:35

ilBeatz

1
1

Then it wouldn't be one image file any more. That's what the OP is after. – Mr Lister Apr 16 '12 at 09:43
I think this would mean creating 2 images for each link and assign ids to each one, not practical in the way that the CSS would end up being huge if there were to be multiple links using this effect on a page. – Philip Bevan Apr 16 '12 at 09:44

score 0 · Answer 4 · answered Apr 16 '12 at 09:49

You could try this:

HTML:

<a href="http://google.com" class="image">Link</a>

CSS:

.image {
    background: transparent url('http://javascript.info/files/tutorial/browser/events/rollover-sprite/button.png') no-repeat top left;
    width: 186px;
    height: 52px;
    display: block;
    text-indent: -9999px;
}
.image:hover {
    background-position: 0 -52px;
}
.image:visited {
    background-position: 0 -104px;
}

If you want to use sprites, then you should set the image as a css background, and move its position using the background-position property. You can see an example in this fiddle.

CSS. Changing image visited link

4 Answers4