Link monkey business
Simon Collison opened a can of worms recently when his (rather fantastic) personal site launched with the now famous ’ticks’ for visited navigation links. The discussion that followed centered on whether or not the use of background images on visited links could be a security flaw or an invasion of privacy.
I think that Colly’s use of the background-image attribute for visited links is a cool usability enhancement. But there are also cheekier uses for this technique which site developers could use to display images (perhaps containing advertising messages) according to which sites a visitor had in their history.
Perhaps if a hotel owner wanted to say "Nearer to the beach than…" or a book store owner wanted to say "We sell this book 10% cheaper than Amazon" etc.
The technique is easy to apply and with a little CSS and JavaScript, the results can be very cool indeed. To test my thinking, I made this spoof Pop Idol page. You asked for it… here’s Blog Idol!
Getting started
First I set up regular anchors, adding a unique id to each.
<a href="https://www.andybudd.com" id="budd"><span>Andy Budd</span></a>
In the CSS I first hid unvisited anchors with display:none.
a:link#budd { display : none; }
The additional spans around the bloggers’ names are designed to move the link text off screen leaving only the background image showing.
a:visited span {
position : absolute;
left : -1000em;
width : 900em;
}
Then I added basic formatting for the visited link state. To ’mask’ the fact that each image is a link, I added a default cursor to remove the ’hand’.
a:visited#budd {
cursor : default;
display : block;
width : 200px;
height : 100px;
}
(A little JavaScript also removes the URL from the status bar)
<script language="JavaScript" type="text/javascript">
var statusmsg=""
function hidestatus(){
window.status=statusmsg
return true
}
</script>
onmouseover="return hidestatus()"
Last, I added a different background image to each visited link.
a:visited#budd {
background-image : url(images/blog-idol-budd.jpg);
}
Wrapping it up
A visitor who has not been to Mr. Budd’s blog sees nothing, a visitor who has, gets an image. Simple huh? Now I wouldn’t dream of using this technique here… with images saying More handsome than Mr. Budd
or I can drink Mr. Collison under the table
, but you might have some ideas as to how the technique could be used for some evil or nefarious purpose…
;)
Here’s another look at the Blog Idol spoof.
Update
Simon Collison sought opinions from a number of designers on linking and link styles. Simon interviewed Derek Featherstone, Jason Santa Maria, Mike Davidson, D. Keith Robinson, Cameron Moll, and Simon Willison – “in an attempt to consolidate these views, and reflect the broad range of methods in use today.”
Thanks Colly for putting Question Time: Visited Links together.
Replies
-
#1 On June 28, 2004 12:42 AM brothercake said:
Oh yeah, I could think of something very devious things to do with this ..!
So any site could find out if you have or haven’t been to a particular other site, by adding an image to a visited link to that site, then logging hits to that image.
Although I can think of useful applications as well - the "ticks" indication is nice, and it might also be useful as a generic way of reading the state of links - afaik there is no way in the DOM to find out if a link is visited or not, but loading an image could be enough of an event to set a flag for each link. Hmm … interesting …
-
#2 On June 28, 2004 04:34 AM Adam said:
Aha! That "aha!" moment has hit again! Yes, seeing Colly’s visited link-ticking surely sparked lightbulbs in a few people’s heads.
Thanks for the reminder and demonstration - my first thought was a blogroll that eliminates visited sites, through:
#blogroll a:visited {display:none;}
I’m sure there’s millions of uses!
-
#3 On June 28, 2004 10:09 AM Andy Budd said:
"More handsome than Mr. Budd"
Oi!
-
#4 On June 28, 2004 11:04 AM Tim said:
I think you want a#budd:visited and a#budd:link rather than what you’ve currently got ;)
-
#5 On June 28, 2004 09:12 PM Ryan Brill said:
Very interesting. I can think of a few uses for it already, such as using it on a blog to point out recent articles that haven’t been read yet. Sort of an easy way for someone to see which of the recent articles they may have missed. Come to think of it, I might have to try that one out, sooner or later…
-
#6 On June 29, 2004 03:11 PM Mr. Chimp said:
That’s not a monkey!
-
#7 On June 29, 2004 03:22 PM Malarkey said:
Ah ha!
Mr. Chimp wins today’s banana award for stating the bleedin’ obvious ;)
Actually Mr. Chimp, you’ll recognise that it’s a picture of a young George W Bush…
-
#8 On July 2, 2004 04:43 PM Colly said:
How on earth did you get that picture of me?
-
#9 On July 9, 2004 12:46 AM James said:
I can see how this would be good for improving user experiences or getting better impressions on users with advertising.
You might have the page cut out links (advertising) to sites the user has already been to (therefore most likely familiar with). You could also replace these cut out links and put in their place some other links.
Another thing to tell potential advertisers about… -
#10 On July 11, 2004 08:03 PM Matt Brubeck said:
Check out this demo which uses Javascript to determine which links received the ":visited" styles:
https://gemal.dk/browserspy/css.html
I originally found this via:
https://annevankesteren.nl/archives/2004/05/visited-privacy-issue
-
#11 On July 14, 2004 01:20 PM Small Paul said:
Couldn’t care less about all that code, but Blog Idol is the best idea ever. Come on, people. Let’s make it happen.
-
#12 On July 18, 2004 10:24 PM Andreas Rydberg said:
I wonder: if you just to know if a visitor has been visting aspecific site, shouldn’t it work with just checking colors using CSS and then sniff out with JavaScript?
A simple example(haven’t tried this):
a:link { color: #cfc; }
a:visited { color: #ccf; }
function MyVisitedURLSniffer() {
/* code goes here */
}
Just an idea I got…Great article!!