CSS Remote Linking

This is a method I came across while watching a presentation by Douglas Bowman of Stop Design. It allows you to use the same link tag to control two elements in different places on a page. I wanted to play around with it myself, so I thought I’d share. Here’s the example I’ve uploaded. You’ll see I’ve got graphic elements that correspond to links in the top left.

The first thing to do is create the links

<div id="box">
<ul>
<li id="no1"><a href="#">world<span>1</span></a></li>
<li id="no2"><a href="#">sign<span>2</span></a></li>
<li id="no3"><a href="#">check<span>3</span></a></li>
</ul>
</div>

Notice the span tags within the links. Those are how we’ll be creating our images. The way we’re going to do this is by using position:aboslute;, so we’ll want to do this for the containing div element:
#box{position:relative;}
This will keep keep our span elements within the #box.

You can style the unordered list and links however you’d like. I’m going to focus on the span elements that will become our graphics. Here’s the CSS we’ll use for the first link:
#no1 a span{display:block;position:absolute;top:100px;left:0px; width:257px;height:235px;background:url("world.png") no-repeat;text-indent:-2000px;}

The key here, as I mentioned earlier, is position:absolute;. This will break the span element free of the link it’s contained in, so you can move it anywhere you want. You can then use top and left to set it’s location. I used text-indent to move our text within the span out of the way, and because I want it this to display an image, I’ve set a background, as well as a height and width.

To make it clear that the text in the link and this image correspond, I’ll set the hover properties on the span.
#no1 a:hover span{background-position:0px -235px;}
This will shift the background image up into it’s hover state. (notice the image used.) And here’s a little something for the link on the top left
#box a:hover{color:#000;background-color:#eee;}

Now when you hover over either the image or the link text, they’ll both appear in their hover state at the same time. You can continue this for #no2 and #no3. It’s all going to be the same idea, I’ve just switched the images in my example.

And in case you were wondering, this method works in Firefox, Camino, Safari, Opera, and IE6 (and I’m sure pretty much any other browser you’ll encounter).