Search code examples
jquerycookieshyperlinkvisited

Change background of div that is linked to a visited page

Right, since :visited doesnt really work anymore, with background-image anyway, I am looking for an alternative.

I have a page that has say 3 image on it, each with the same background image, (of a closed box), clicking any one of these boxes will take you to a different part of the site, but I want it so when the user returns to the index page - with the 3 divs - the background image of the div that had been clicked previously has changed (open box).

So as I said before, I think I am looking for an alternative to :visited, which im guessing will be done through jquery + cookies?

Hope this makes sense!

I only require this to work with chrome.

Solution

  • If you're going for the cookie option, you can download the jQuery plugin here:

    https://github.com/carhartl/jquery-cookie

    When someone clicks on one of the links, register the visit:

    $('a').click(function () {
    $.cookie('the_cookie', 'the_value', { expires: 7 });
});

    On the page load, check if they're a returning visitor and work out the new background:

    $(function () {
    if ($.cookie('the_cookie') == 'the_value')
        $('div').css('background-image', 'new image');
});