Multiple Remote Linking: An Example and How-To

Avatar of Chris Coyier
Chris Coyier on

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]