Remote Linking

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Remote Linking is what I call it when a single anchor link has multiple clickable areas in different locations. It can be used for pretty neat effects and requires nothing but CSS.

It’s not a brand new idea and in fact I’ve covered it before, but I thought I’d put together a more ‘real-world’ example for ya’ll.

View Demo   Download Files


How to do it

There isn’t much to it, just put everything you want to be part of the roll-over-able area inside a single anchor link. Like so:

<a href="#toby" id="toby">
	<span class="name">Toby Yong</span><br />
	Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. Young is a British journalist and the author of How to Lose Friends and Alienate People.
	<img src="images/blog-toby_young_0.jpg" alt="Toby Pic" class="photo" />

We now have all the hooks we need to target the different parts and do what we need to do. Of course, apply some styling and positioning to the text, but more importantly, target the image itself and pull it away using absolute positioning.

Here is all the CSS involved:

.people		{ position: relative; } 
a			{ text-decoration: none; color: #222; display: block;
	 		  margin: 0 0 0 270px; outline: none; padding: 5px; }
a img			{ border: 1px solid #ccc; display: block; position: absolute; }
a:hover		{ background: #ffefcd; }
a .name		{ font: 18px Georgia, Serif; }
a:hover .name		{ color: #900; font-weight: bold; } 
a:hover img		{ border: 5px solid #222; margin: -4px; }
#toby img   		{ top: 0; left: 0; }
#tom img		{ top: 0; left: 134px; }
#gail img		{ top: 134px; left: 0; }
#padma img		{ top: 134px; left: 134px; }

Images and text from example are from Bravo’s Top Chef.