473,657 Members | 2,478 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.

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
1 1351
Thanks, that is a much simpler solution than what I was attempting..


"SAM" <st************ *********@wanad oo.fr.invalidwr ote in message
news:48******** *************@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.

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

18
10735
by: Jan Tuxen | last post by:
Jakob Nielsen in his most recent Alertbox (http://www.useit.com/alertbox/20040503.html) tells web authors to change the color of visited links. I agree to his purpose: Help users understand where they have been. I also agree to the background: Too many web authors keep uniform link colors or their pages, thereby confusing the users. What I have a hard time agreeing to is his conclusion that web authors should deliberately change the...
7
3333
by: Will Hartung | last post by:
I have this: <a class="pink_link" href="faq.html#q1">Go to question 1</a> And the CSS is simply: ..pink_link {color: #fa61b7; font-weight: bold;} So, I'm curious why my links are blue and not pink. All of my other "pink_links" are pink, but they don't link to anchors on the same page.
6
7052
by: Pasi Kovanen | last post by:
How do I define for example link inside H1 style to be of different color than other links in the same page: <a href="blah">this is some color</a> <h1><a href="blahblah">this is different color</a></h1> I remember seeing suitable code for this a couple of years ago but wasn't able to google my way to it.
3
1576
by: Elmo Watson | last post by:
For our intranet - I've standardized on black for links (from input of users) - no change for visited, etc... However, on one page, I've been asked to make the normal blue for non-visited/purple for visited to be instantiated. I figured I could easily create a class for this - - - - BUT......(and I know how to create a class) ---- I'm not sure how to create a class that will include A:LINK and
19
10972
by: opt_inf_env | last post by:
Hello all, I know that in html to set colors of visited and activ links one need to use line in the following format: <BODY text="#FF0000" link="#0000FF" alink="#FFFF00" vlink="#00FF00"> However, I would like to use xhtml with css. In css-file I have the next line:
3
1190
by: Jim Corey | last post by:
I have a datagrid displaying a report, which includes link buttons that I use to drill down. A. When I return to the datagrid the links display as visited. B. If I run my report again and change some parameters, the report may be totally changed in terms of data and number of rows, but links in the same physical position in the datagrid still display as visited.
0
1419
by: PsyBorg | last post by:
This is not entirely a PHP question although it is based in PHP. I have been creating a site, where I want the visitors to see the visited links as "Crossed Out" using CSS. However, I also want this effect to disappear after about 18 hours, so I used a PHP cookie to read when the last time the user visited the site was, and change the CSS so that the "visited" links had the same "Style" as the regular links. This seemed to work, however...
5
1934
by: senaka | last post by:
Hi, I need to identify the visited links on a clients machine dynamically. When he/she loads my page i need to know what links were visited during the previous session(s). This is not regarding the current session. Is there any way. This has nothing to do with CSS or colors. but, I merely want to know whether there is any other sort of indication to whether the link was visited. The point is if the browser knows that a link was clicked...
2
2885
by: jkizmannRU09 | last post by:
I know how to adjust the look of visited links with a CSS stylesheet, but how would one create individual variations among a set of links? For example, say I have three links, all initially looking the same. After clicking, I want the first to change to red, the second to be blue, the third to be green. Changing the color seems to be easiest, but if possible, I'd also like the visited links to vary by size, font, and maybe decoration...
0
8420
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8324
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8617
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7353
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5642
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4173
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4330
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2743
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1970
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.