By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,945 Members | 1,703 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,945 IT Pros & Developers. It's quick & easy.

Re: How do links know they have been visited?

P: n/a
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.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. a img { width: 98px; height: 32px; border: none; }
  3. a { background: url(img1/jpg) no-repeat center center; }
  4. a.visited { background-image: url(img2.jpg); }
  5. a.hover { background-image: url(img3.jpg); }
  6. a.active { background-image: url(img4.jpg); }
  7. </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

Expand|Select|Wrap|Line Numbers
  1. a { background: url(button/jpg) no-repeat center center; }
  2. a.visited { background-position: left center); }
  3. a.hover { background-position: right center; }
  4. a.active { background-image: none; background: red;}
Expand|Select|Wrap|Line Numbers
  1. <a href="#">
  2. <img src="empty.gif" alt="menu 1">
  3. </a>

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

--
sm
Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. a img { width: 98px; height: 32px; border: none; }
  3. a { background: url(img1/jpg) no-repeat center center; }
  4. a.visited { background-image: url(img2.jpg); }
  5. a.hover { background-image: url(img3.jpg); }
  6. a.active { background-image: url(img4.jpg); }
  7. </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

Expand|Select|Wrap|Line Numbers
  1. a { background: url(button/jpg) no-repeat center center; }
  2. a.visited { background-position: left center); }
  3. a.hover { background-position: right center; }
  4. a.active { background-image: none; background: red;}

Expand|Select|Wrap|Line Numbers
  1. <a href="#">
  2.   <img src="empty.gif" alt="menu 1">
  3. </a>


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

--
sm
Jun 28 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.