How do a change an image inside an anchor when you are on the said page of the anchor

3 Views

How do i change an image, which is (inside an anchor) for another image (exactly the same width and height), once it (the anchor) has been clicked? – using CSS

so…

Read More
<a href="http://etc.co.uk/"><img src="etc.png"></a>

I want my etc.png to show as a different image once you have clicked the anchor. any ideas? Would LOVE if someone could help me with this

Post Views: 3

Related posts

2 comments

  1. First thing I assume you’re talking about an anchor link or a target blank link – otherwise I don’t see the point of changing the image if the user leave the page.

    There is no perfect CSS-only solution for that situation. You could play with the pseudo classes of your link and set your image as background of a.

    HTML :

    <a href="http://etc.co.uk/" class="etc-link" target="_blank"></a>

    CSS :

    a.etc-link {
    background: url("blah.jpg") center center no-repeat;
    display: block;
    height: 10px;
    width: 10px;
}

    With :active

    a.etc-link:active {
    background-image: url("blah-active.jpg");
}

    Pro : accept the background-image property

    Cons : lost after the link is opened

    With :visited

    You can use :visited only with few css properties: background-color, color and border / outline color. You could eventually play with background-color and a png file with transparency.

    One thing to note is that :visited is persistent as long it is in the user browser history.

    With Javascript

    The better of course if you can is to use Javascript. You don’t need jQuery for that, this simple line will do the trick:

    <a href="http://etc.co.uk/" target="_blank" onclick="this.firstElementChild.src='etc-active.jpg'"><img src="etc.jpg" /></a>

  2. You can do like this

    <a href="http://etc.co.uk/"><img src="etc.png" onclick=src="blah.jpg"></a>

Comments are closed.