Grow your CSS skills. Land your dream job.

Multiple Remote Linking: An Example and How-To

Published by Chris Coyier

What is remote linking?

Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.

In this example, you will see a row of colored circles across and a list of their names below. Rolling over the circle will highlight both the circle and the name. Likewise, rolling over the name will highlight both the circle and the name.

remotelinking.gif

You can see the code is just a very simple unordered list with unique ID's attached to each list item. Of course, CSS3 will make this easier and remove the need for unique ID's, but that's another story...

<ul>
	<li id="red"><a href="#"><em>Red</em></a></li>
	<li id="yellow"><a href="#"><em>Yellow</em></a></li>
	<li id="orange"><a href="#"><em>Orange</em></a></li>
	<li id="green"><a href="#"><em>Green</em></a></li>
	<li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>

Then you give the list items some generic information about size and positioning. Each specific list item gets some extra info about the background image and the placement of the em.

ul li a {
		width: 100px;
		height: 100px;
		display: block;
	}
	ul li a em {
		position: relative;
	}
	
	ul li#red a {
		background: url(images/red.gif) bottom center no-repeat;
	}
	ul li#red a:hover {
		background-position: top center;
	}
	ul li#red a em {
		top: 150px;
	}

The real trick here is giving the em inside the anchor relative positioning and then bumping it away with top/bottom/left/right coordinates. This keeps everything inside a single anchor element which is why the rollover automatically works on both elements. I love this technique, it's making me all giddy. =)

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  1. Volkan Görgülü
    Permalink to comment#

    The other day, after reading your post “Links of Interest”, I watched the video of Doug Bowman, Beauty of CSS. He was talking about these Remote Rollovers, I thought they were great and decided to make some research for today.

    And since I am subscribed to your RSS Feed, I have seen your example.

    It is great, thank you very much, your tutorials are very easy to understand and vey straightforward.

    Best Regards

  2. Volkan Görgülü
    Permalink to comment#

    I want to make a suggestion about the your css;

    Instad of writing

    ul li#blue a {}
    ul li#blue a:hover {}
    ul li#blue a em {}

    You can write as

    #blue a {}
    #blue a:hover {}
    #blue a em {}

    Best Regards

  3. @Volkan: Yep, that’s totally where I got the idea for this post. I thought that looks really neat and have never attempted to do that before. Also, your CSS suggestion looks sound and would lighten it up a bit — no harm either way.

  4. mmm very nice indeed. Just been looking at the code and it is very neat and clever yet very simple.

    However I am a bit stumped on what you would use teh technique for though. Any useful ideas?

  5. In the video where I got this idea, Doug Bowman used it in a very cool way. He had the photos for several people in black and white lined up horizontally and their names listed in a list below. As you hovered over the photographs, they turned to color and their name highlighted.

    He also used it another way which was even more interesting. He had a link in his footer to the hosting provider he was using. He wanted the same link on the upper right corner of his page as well. So he put an em element inside that link and gave the em absolute positioning throwing it up in the upper right corner. Same link, two places. It was very cool, and it helps keep you page lighter weight as well.

  6. Oriol
    Permalink to comment#

    I’d suggested a simple piece of code:

    a {
    outline:none;
    }

    Otherwise, we have a big ugly outline border when clicking at the balloons.

  7. So if you have the same link twice on the page it could be useful to use this feature??

  8. @Oriol: Yes! That is a great suggestion. I actually have always wondered if there was a way to get rid of those dumb lines. Especially when floating objects, they are really nasty. I was just completely oblivious to that CSS property.

    @Jermayn: That’s essentially the deal. But it’s in situations where you want both the links to do the same thing is where it’s most useful, not just that it’s the same link. Actually, this technique could work for using the same anchor element to control 3, 4, 5, really unlimited number of objects on the page.

  9. Volkan Görgülü
    Permalink to comment#

    Hi Chris,

    I was using this technique in one of my projects. And I come up with a suggestion for a lighter css file.

    Since background position and repeat values are same for each a and a:hover, we can group them as

    ul li a {
    background-position:bottom center;
    background-repeat:no-repeat;
    }

    ul li a:hover {
    background-position:top center;
    }

    and we can change our code to

    ul li#red a {
    background-image: url(images/red.gif)
    }

    ul li#red a em {
    top: 150px;
    }

    The difference is 1.50KB becomes 1.32KB :D

    By the way,

    When I download the example it is missing its opening html tag.

    And the link tag should not be self closed according to the current schema.

    Finally IE6 does not show your POSTComment button (maybe at least for me)

  10. @Volkan: Both your ideas on this example have been spot on. That is really how you harness the Cascading part of CSS, to help keep things lightweight. Thanks for pointing out the opening html tag, I have that fixed on the page and on the download now.

    About the button in IE…I’m not too concerned about it, it’s a nice little bonus for using Firefox I guess. You don’t get it in Safari either because of the default buttons Safari uses.

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".