Blog Idol
Who is going to become this year's Blog Idol? Well, with so much talent out there on the web, it's going to be a touch choice! Take a look over on the left, if you see Andy Budd, Simon Collison, Jon Hicks or Dunstan Orchard, it means that you have visited their (rather wonderful) web-sites recently and their URLs are in your history. If not, go and check them out and then return to this page. When you come back you'll notice that their logo has appeared (as if by magic). I've also added Cameron Adams, Doug Bowman and Jeffrey Zeldman 'cos I like them too.
Is this a security flaw or a privacy invasion, dunno... This little trick might be useful in all sorts of situations. If a hotel owner wanted to say "Nearer the beach than..." (if visitors had been to a competitor hotel's web-site), if a book store wanted to say "Selling this book 50% cheaper than Amazon" etc. I'm not recommending using this technique for any nefarious purposes, just musing on the possibilities.
Technical Malarkey
First I set up the regular anchors, adding a unique id to each.
<a href="http://www.andybudd.com" id="budd"><span>Andy Budd</span></a>
In the CSS I first hid the named 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 could also remove 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);
}
