Remote Rollover Demo | July 16, 2005

I’m just preparing my slides for Tuesdays training course and thought I’d post up a couple of my remote rollover demos.

The basic set-up is very simple. You take a regular unordered list and wrap an extra, non-semantic span around the link text.

<ul id="pic">
<li class="rich"><a href="#"><span>&raquo; Richard Rutter</span></a></li>
<li class="dan"><a href="#"><span>&raquo; Dan Cederholm</span></a></li>
<li class="dunstan"><a href="#"><span>&raquo; Dunstan Orchard</span></a></li>
</ul>

You then apply your background image to the list, and set it’s position to relative.

#pic {
  margin: 0;
  padding: 0;
  width: 640px;
  height: 480px;
  list-style: none;
  background: url(rich-dan-dunstan.jpg) no-repeat;
  position: relative;
}

In the first example I’m using the anchor elements to produce the rollover effect.

#pic a {
  display: block;
  width: 100px;
  height: 140px;
  text-decoration:none;
  color:#003399;
}

#pic a:hover {
  border: 1px solid #fff;
}

I’m then positioning the anchors using floats and margins

#pic a {
  float: left 
}

#pic .rich a {
  margin-left: 80px;
  margin-top: 40px;
}

#pic .dan a {
  margin-left: 90px;
  margin-top: 50px;
}

#pic .dunstan a {
  margin-left: 140px;
  margin-top: 60px;
}

and positioning the text links absolutely

#pic a span {
  position: absolute;
}

#pic .rich a span {
  bottom: -2em;
  left: 0;
}

#pic .dan a span {
  bottom: -3.2em;
  left: 0;
}

#pic .dunstan a span {
  bottom: -4.4em;
  left: 0;
}

Positioning the anchors using floats and margins works if the items you want to roll-over are all roughly in a line. However if they are not, you need to position them absolutely as well. You can’t position the anchors absolutely, so you need to add an extra, non-semantic span inside the anchors.

<ul id="pic">
<li class="rich"><a href="#"><span class="box"></span><span class="link">&raquo; Richard Rutter</span></a></li>
<li class="dan"><a href="#"><span class="box"></span><span class="link">&raquo; Dan Cederholm</span></a></li>
<li class="dunstan"><a href="#"><span class="box"></span><span class="link">&raquo; Dunstan Orchard</span></a></li>
</ul>

You can then absolutely position those elements as well.

#pic .rich a .box {
  top: 30px;
  left: 80px;
}

#pic .dan a .box {
  top: 60px;
  left: 270px;
}

#pic .dunstan a .box {
  top: 70px;
  left: 520px;
}

This is how the second example works. Both these examples are fairly rough. They haven’t been extensively tested so I wouldn’t be surprised if they break on IE. However I think they provide an interesting example of what can be achieved using some fairly basic CSS. Throw in some pure CSS rollovers and you’d have something akin to the way flickr displays comments on images.