Re: How do links know they have been visited?

[SAM]

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]

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


"SAM" <st*********************@wanadoo.fr.invalidwrote in message
news:48*********************@news.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.

<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