Grow your CSS skills. Land your dream job.

Remote Linking

Published by Chris Coyier

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" />
</a>

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.

Comments

  1. Permalink to comment#

    Great way to minimize HTML and CSS. Thanks

  2. i follow your blog each time i can, and you do awesome tricks with css, htm and jquery.Love it.
    You are like a teacher ;)
    Keep going on !!!
    Have a great day.

  3. PA
    Permalink to comment#

    Not “IE6 compliant” ?

    • Isn’t it about time to let IE6 die? I’m personally sick and tired of it. We’ve had to deal with it’s shortcomings since it was released almost 8 years ago…UGH!

    • Sorry. I agree that IE6 needs to die, but there are still a lot of people out there that have not made the jump to 7. PC users are historically late in upgrading. Once IE8 is about to pop, you will probably see a ton of people finally move up to 7. Blame it on years of poor MS apps where most are not willing to upgrade to the latest version. Sad, but true. Look how long it took 5.5 to die. Now that was painful.

    • Sam
      Permalink to comment#

      Don’t agree Not IE Fanboy.
      (Actually i’m a not IE fan too)… however. Most IE6 users are using Windows 2000/Windows NT. And as long that users use that old windows version there is nothing what will move them in any direction.

    • Shane
      Permalink to comment#

      I am also tired of dealing with IE6. Unfortunately there are a great deal of large companies out there who have invested heavily in developing intranets and other systems back when IE6 was popular. Getting budgets approved to re-develop entire systems just to make a jump to the next version of a browser is not a top priority for many of these companies. My hope is that they held off on the IE6 to IE7 jump and will finally re-develop for IE8. Of course, the economy may delay these type of projects a bit.

    • yes, i agree too! Let’s kill IE 6. it makes a lot of problems and needs additional hacking code :(

    • Jay
      Permalink to comment#

      Works fine in ie6 for me…

      I actually booted another Windows box to try it.

  4. Cool Markup. I didn’t expect the images and text wrapped in a single ‘a’ tag and absolute positioning doing the trick.

    Thanks Chris..

    Noushad Moidunny,
    noussh.com

  5. DivinoAG
    Permalink to comment#

    The technique looks interesting, I’ll be sure to try it on a future project. Thanks.

    You might want to find a better name for it tho. Remote linking is known as using content across domains without proper authorization from the original uploader.

    Like if you used an image on your website that was allocated on a different domain, or linked for a direct download instead of linking to the page where that download could be found.

    Using this name will only lead to confusion to people that know the original expression.

    • This is a great fundamental technique, but I was thinking the same thing when I read the title. Perhaps “Remote Hover States” would be a better description?

  6. Daniel K
    Permalink to comment#

    Add a :target and you can really have some fun with the styles :)

  7. William
    Permalink to comment#

    Very nice!

  8. You rock

  9. Chris, You are the best!

  10. Very cool :-)

  11. Very cool one Chris.
    I would never thought about using just CSS to do that.
    Great CSS-trick here. Thanks.

  12. Sam
    Permalink to comment#

    I think it’s cool. Depends how it works in a live environment and not just on a blank page. IE6 css is a shame but tiny. Good output!

  13. That’s just incredible. With this technique we can build some others cool stuffs. I never realize it. Thanks a lot Chris.

  14. Matt
    Permalink to comment#

    Very cool. Thanks Chris!

  15. Permalink to comment#

    wow thanks

  16. That is very useful thing.. thanks a lot

  17. Simple YET awesome. With some jQuery magic, we can even take it to the next level. Thanks Chris. you are the man.

  18. This is cool. brilliant trick

  19. Permalink to comment#

    Clearleft does an interesting implementation of this, adding in the z-index for the layered effect.

    http://clearleft.com/is/

  20. David Jones
    Permalink to comment#

    I thought this article was going to be about hot-linking but when I read it I thought – yes! It’s a great technique that I’ve seen on a few sites and I must say it really adds some polish.

    Thanks for sharing!

  21. Unfortunately, reduces the semantics a bit doing it this way. The name of each person should really be in a hx tag, rather than a span styled to look differently. I’d probably use something like Big Target to do this instead.

  22. Great stuff Chris! This could prove to be very useful in a project I’m working on.

  23. Maybe one way to push people out of IE6 is to just stop trying to make anything work for it. Maybe then people would get a clue.

    Great tutorial by the way!

  24. Thank you so much chris.

  25. Oh looik, this is sweet!

    I love this site, you put so much detail in your posts – including code along the way really does help.

    Thanks, another fine trick!

  26. Great work with this technique. As always, I love what you have done here. Now it will be fun to rework things around the different projects I have going on.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".