How do links know they have been visited?

Discussion in 'Javascript' started by Simon Wigzell, Jun 27, 2008.

  1. I wish to duplicate text link behaviour with some button images. Hover is
    easy but other than saving cookies how can I know if the page that the
    button liks to has been visited so that I can display a different image?

    With text links the link knows if it has been visited, so there is something
    available in the browser that is keeping track of every page visited. I
    guess we see it also in the website url pulldown and auto complete as we are
    typing links. Can I access this info with javascript?

    Thanks.
    Simon Wigzell, Jun 27, 2008
    #1
    1. Advertising

  2. Simon Wigzell

    SAM Guest

    Simon Wigzell a écrit :
    > I wish to duplicate text link behaviour with some button images. Hover is
    > easy but other than saving cookies how can I know if the page that the
    > button liks to has been visited so that I can display a different image?


    It is a simple question of CSS,
    no need of JS for that.

    <style type="text/css">
    a img { width: 98px; height: 32px; border: none; }
    a { background: url(img1/jpg) no-repeat center center; }
    a.visited { background-image: url(img2.jpg); }
    a.hover { background-image: url(img3.jpg); }
    a.active { background-image: url(img4.jpg); }
    </style>

    Better working with an alone image
    (where the 3 main images are sticked side by side)
    if not, user will have to wait the new image of the roll-over

    a { background: url(button/jpg) no-repeat center center; }
    a.visited { background-position: left center); }
    a.hover { background-position: right center; }
    a.active { background-image: none; background: red;}

    <a href="#">
    <img src="empty.gif" alt="menu 1">
    </a>


    'empty.gif' is a transparent image of 1 px

    --
    sm
    SAM, Jun 27, 2008
    #2
    1. Advertising

  3. Simon Wigzell wrote:
    > I wish to duplicate text link behaviour with some button images.


    That would be impossible as a (hypertext) link is not a button. But I think
    I know what you really mean.

    > Hover is easy but other than saving cookies how can I know if the page
    > that the button liks to has been visited so that I can display a
    > different image?
    >
    > With text links the link knows if it has been visited, so there is
    > something available in the browser that is keeping track of every page
    > visited.


    The link knows nothing. The user agent is keeping track of the visited
    sites through the browser's history, and the former's layout engine is
    usually applying CSS on the hyperlink (whether it has textual content or not).

    > I guess we see it also in the website url pulldown and auto complete as
    > we are typing links.


    Strange talk you do. "We" *don't* type links in a browser's location bar,
    "we" type _URIs_. Besides, which browser are you talking about anyway?

    > Can I access this info with javascript?


    I don't think so. However, you don't need scripting here, HTML and CSS suffice:

    a.img {
    display: block;
    background-repeat: no-repeat;
    }

    a.img span {
    visibility: hidden;
    }

    #img1 {
    width: 42px;
    height: 23px;
    background-image: url(foo.png);
    }

    #img1:visited {
    background-image: url(bar.png);
    }

    <a href="baz" class="img" id="img1"><span
    class="hidden">alternative</span></a>

    There is one drawback: The link will be empty if you disable images but not
    stylesheets. But maybe someone in
    comp.infosystems.www.authoring.stylesheets knows how to work around that.


    HTH

    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Jun 28, 2008
    #3
  4. Thanks, that is a much simpler solution than what I was attempting..


    "SAM" <> wrote in message
    news:486569ed$0$865$...
    > Simon Wigzell a écrit :
    >> I wish to duplicate text link behaviour with some button images. Hover is
    >> easy but other than saving cookies how can I know if the page that the
    >> button liks to has been visited so that I can display a different image?

    >
    > It is a simple question of CSS,
    > no need of JS for that.
    >
    > <style type="text/css">
    > a img { width: 98px; height: 32px; border: none; }
    > a { background: url(img1/jpg) no-repeat center center; }
    > a.visited { background-image: url(img2.jpg); }
    > a.hover { background-image: url(img3.jpg); }
    > a.active { background-image: url(img4.jpg); }
    > </style>
    >
    > Better working with an alone image
    > (where the 3 main images are sticked side by side)
    > if not, user will have to wait the new image of the roll-over
    >
    > a { background: url(button/jpg) no-repeat center center; }
    > a.visited { background-position: left center); }
    > a.hover { background-position: right center; }
    > a.active { background-image: none; background: red;}
    >
    > <a href="#">
    > <img src="empty.gif" alt="menu 1">
    > </a>
    >
    >
    > 'empty.gif' is a transparent image of 1 px
    >
    > --
    > sm
    Simon Wigzell, Jun 28, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Martin M.
    Replies:
    4
    Views:
    341
    Simon Brunning
    Dec 15, 2005
  2. David A. Black
    Replies:
    2
    Views:
    223
    Tim Hunter
    Aug 19, 2004
  3. Marc Heiler
    Replies:
    1
    Views:
    135
    Stefan Lang
    Jan 26, 2008
  4. Replies:
    13
    Views:
    210
    Calamitas
    Mar 18, 2009
  5. Replies:
    0
    Views:
    97
Loading...

Share This Page