Creating 'sliding doors' rollover effects

Ever since the 90s, when web sites became enormously popular and had garish animated GIFs in every conceievable position, web designers have been using rollover effects to create the feel of interactivity.  It has been conclusively proven (probably) that users like to feel in control, and if the web page reacts to what they do, that essentially makes it more fun to use.  The simplest rollover effect is a hyperlink; by default it's blue initially, and changes colour when you hover your mouse over it, showing that it's a link.  You can play around with these text-only hover effects to your heart's desire, and you can actually create some stunning and stylish effects just with some imagination and some clever CSS.

Going further than that can be tricky, and today's web designers will tell you that you should only use Javascript for rollovers where absolutely necessary.  CSS is powerful enough to handle most situations, and keeps your site fresh and responsive.  The easiest way to create an image-based rollover in CSS is to change the background image when you hover over it:

  1. #rollover {background: url(image1.png); width: 100px; height: 50px;}
  2. #rollover:hover {background: url(image2.png);}

This is fine, and works quite nicely.  However, this approach involves using two separate images, one of which is only loaded when you hover over the object.  That means there is likely to be a short pause when you first hover over it, as the browser goes off and finds the image.  This isn't a huge problem, but it's easy solved using the 'sliding doors' method.  This isn't new, incidentally, and I have had nothing to do with its development, but I'm demonstrating it anyway.

The idea is that you have both images contained in one image.  That doesn't quite sound right, so let me explain further.  Consider the image below.  It's 100px by 100x, split in half at the 50px mark, essentially with two images placed next to each other.  When put onto a web page we tell the object to only be half that height, and by setting the background position we can make sure that only half of that image is shown at any time.  Essentially, our canvas is bigger than our viewport.  To create a rollover effect, all we do is shift the background position to show the other part of the image.  This means there is no delay on hover-over, because it's not having to load another image, just move the one it already knows about.  The demonstration images I've used are really simple, so that you can see what's happening, but potentially they could be much more complex and pretty, and could be used for menu items, buttons, links, all sorts of things.

  1. #rollover {background: url(slidingdoor1.png) top center; width: 100px; height: 50px;}
  2. #rollover:hover {background-position: bottom;}

See a demonstration of this rollover effect.

Taking the idea further... with some Javascript

If you're after something a little more impressive than just a simple two-state hover effect, maybe this will be more up your street.  This example uses a 3x3 grid of images, giving you 9 possible views.  I've kept it simple for demonstration purposes, but you could easily make the grid larger and make each one an actual picture of something.  All you have to do is place them all side by side in a graphics program first.

Using the :hover technique above won't quite work here, because we want more than two states, so we're going to have to turn to Javascript to help us.  Javascript allows us to change the CSS properties of other elements, including the background position, which means we can tell remotely control the placement of our 3x3 grid image.  I've used onmouseover, which runs some inline code whenever you hover your mouse over it, but you could just as easily use onclick instead.  I've also kept things simple and put all the Javascript inline, but it would work just as well if you created a routine instead - in fact, that would probably be tidier, thought it won't make much difference in terms of performance.  You can use absolute values for the offset from the origin (top left corner), or use natural language versions (such as "top right"), whichever suits your purpose best.

  1. #rollover {background: url(slidingdoor2.png) center center; width: 50px height: 50px;}

...

  1. <a href="#" onmouseover="document.getElementById('rollover').style.backgroundPosition = 'top left'">Top left</a>
  2. <a href="#" onmouseover="document.getElementById('rollover').style.backgroundPosition = '100px 50px'>Bottom centre</a>

See a demonstration of this effect.

Don't overuse this technique, as huge rollover effects went out of fashion some time ago, but if used carefully and stylishly they can still draw a crowd and keep your visitors happy.

Matthew