Re: How do links know they have been visited?

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • SAM
    #1

    Re: How do links know they have been visited?

    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.

    Code:
    <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

    Code:
    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;}
    Code:
    <a href="#">
<img src="empty.gif" alt="menu 1">
</a>

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

    --
    sm
    Tags: None
    • Simon Wigzell
      #2
      Re: How do links know they have been visited?

      Thanks, that is a much simpler solution than what I was attempting..


      "SAM" <stephanemoriau x.NoAdmin@wanad oo.fr.invalidwr ote in message
      news:486569ed$0 $865$ba4acef3@n ews.orange.fr.. .
      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.
      >
      Code:
      <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
      >
      Code:
      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;}
      >
      Code:
      <a href="#">
  <img src="empty.gif" alt="menu 1">
</a>
      >
      >
      'empty.gif' is a transparent image of 1 px
      >
      --
      sm

        Comment

        Previous template Next
        Working...