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.

Posted at July 16, 2005 11:50 AM

Comments

Paul Goscicki said on July 16, 2005 3:37 PM

Yea, it almost works in IE ;)

Travis Schmeisser said on July 16, 2005 3:41 PM

Awesome tip! I’ve seen it around and never given it a try. Thanks!

Dan’s got the wrong url though - oops!

Clay Smith said on July 16, 2005 3:49 PM

Whoa, that doesn’t work in IE at all. I wonder what it would take to fix it for all browsers?

Faruk AteÅŸ said on July 16, 2005 3:50 PM

They’re all sortsa misplaced in IE.. sadly. :/

Also, your page layout gets broken in IE6 by the above code samples.

Want me to show you some samples of what all gets messed up in IE?

Neil Ford said on July 16, 2005 3:56 PM

Interesting. IE does break it I’m afraid.

If you were to attempt the same effect with javascript, do you think you would need less mark up?

Dave S. said on July 16, 2005 4:27 PM

You’ll probably want to start by display: block’ing all those spans to get it to do what you’re expecting. Then I’d guess you’re looking at IE’s classic a:link/a:visited mismanagement; apply your positioning to both states and you’ve probably got it.

Faruk AteÅŸ said on July 16, 2005 4:28 PM

Andy,

Douglas’ photo gallery has a similar thing going on, yet his works fine in IE (6). Here’s his CSS in case you’re curious. :-)

Andy Budd said on July 16, 2005 4:59 PM

The first example was screwed in IE because of the double margin float bug. Adding display:inline seems to have fixed that. IE also seems to be basing the width of the span on the width of the anchor, instead of the new flow. Giving the span an explicit width seems to fix the text wrapping.

However I think the second example is going to be a bit more problematic to fix in IE.

Ben Rogers said on July 16, 2005 6:02 PM

Nice…certainly good for an example of how flash/JS doesn’t always need to be used for every last “dynamic” effect. One thing, though…instead of just a:hover, why not a:hover, a:focus? That might help a bit for usability, aside from just the dotted gray outline that comes with tabbing.

Andy Budd said on July 16, 2005 6:17 PM

The problem with example 2. in IE seems to be that neither of the rules targeting the spans using dynamic pseudo classes work.

#pic a:hover .box { border: 1px solid #fff; } #pic a:hover .link { color: #0066FF; }

So if you hover over the link text or the hot areas you get no visual feedback. This is weird as I’m doing a similar thing in example 1 and they worked correctly.

While trying to figure out why this was happening, I seem to have stumbled onto a fix. You can see it working in Example 2a.

Adding a border to all the anchor hover states seems to fix things in IE.

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

I haven’t a clue what’s going on here, or why it would work, but it seems to do the trick. If anybody can throw any light on what’s happening here I’d really appreciate it, as my head hurts trying to imagine what IE thinks it’s playing at.

Andy Budd said on July 16, 2005 6:53 PM

Seems like it’s a known bug

Jens Meiert said on July 16, 2005 11:06 PM

It’s the photo I like most ;)

Jeremy Keith said on July 17, 2005 12:57 PM

Waiter, there’s behaviour in my presentation layer.

Rob Waring said on July 19, 2005 2:45 PM

Dunstan looks like Matt wotsit off A Question of Sport in that piccy.

Cool technique tho

Christian Ready said on July 20, 2005 2:31 PM

I looked at example 2a in IE 6/Win XP/SP 2. It definitley is working better than the other attempts, but I notice that when I hover over either a “head” in the image or even over the text link, the cursor does not switch to a hand as one would expect.

Also, in IE, I noticed that if I am mousing over top the “link” area, I am able to click a link that probably shouldn’t be there - in other words, I see that Richard Rutter is highlighted even thouh m cursor appears in the upper right-hand side of the image.

Man, I hate IE.

Anyway, an excellent implementation!

Eric Quah said on July 22, 2005 8:35 PM

Well, so far, both examples work well on my IE. Only thing is that when I move the cursor to the text link below the pix, both examples show the cursor as crosshair for selecting text instead of a hand, as stated by Christian above. On the pix, it did turn into a hand so that works fine. But still in the text link, the hover effect works fine, as are the links.

Paul said on July 28, 2005 10:25 AM

This is really a good one. You can visit my site at the link below.

Stu said on July 28, 2005 1:41 PM

I have used a similar method months ago and it works in IE too.
http://www.stunicholls.myby.co.uk/menu/imap.html

Andy Budd said on September 2, 2005 4:43 PM

Strange that it doesn’t work in Safari. I rarely see that happen.

Rob Hofker said on March 21, 2006 9:23 AM

I didn’t know this effect was called Remote Rollovers. I have used something very similar on my site and always called ‘double action menu’.
You can see it in action at my web site
I used a dummy transparent 1×1 img for the remote rollover. I was inspired by Eric Meyers pure css popups
I wanted the images to ‘stay’ and be clickable. With some positioning I finally got it working.

AFAIK it works in most browsers.