The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I have used similar techniques myself before for creating pop up boxes etc and disjointed rollovers and its just a matter of finding out what works and what doesn't. Loading an image in the background and then one in the foreground seems to work quite well, but loading 2 background images in the same place doesn't seem to produce the desired effect.

Just so you know, the page you listed does not display in Mozilla Firebird correctly. The top section is skewed and takes up most of the page.

Hummm? I use Firebird mainly (Using IE only to test pages) and it's rendering fine on mine (after a few tweeks this morning it also should be OK in Safari. I swaped the id's for classes) .
What version of Firebird are you using (mine is 0.6.1)? could you mail me a screeny to mediaman_12@hotmail.com thanks.

There are some really interesting soultions on this page, but non of them can work on mine .
The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window, Instead of making rolover's that are optimised for the smaller window, and in the bigger one just having loads of space.
The only image that is displayed from the list is the titles.

Additional: Anybody know how to style <HR />'s so they are styled in more browsers than just IE? I have a HR in the CSS page but only IE seams to take any notice.

It seems that only the foreground image will cache and so if you put the second image into the background as well it will have to reload when you switch it on and off.

I did do a version with two anchors in the same place. One for the image and one for the text only ( I thought that it might be better for SE etc). I thought it was working but when you hovered over the text the image swapped back again. It was fine when you hovered over the image alone. Just couldn't get it to work that way.

There are some really interesting soultions on this page, but non of them can work on mine .
The original reason I chose to do it this way was so all the rollover images are always proportion to the rest of the page. So if you have a 1280X720 window you will see more of the rolover images than on a 800x600 window

Would something like this work. It seems to rollover a lot lot quicker than your page (and its fluid).

Thaks for the HR, Works in both IE and Firebird, I will test it in Safari When I get home.

test example
The rollovers are almost sorted (I even like the way they load in doing it this way), I can't get it to position the image in the centere and hide a bit at each side (instead of just hiding the right hand edge) though, Is this possible? If it isn't I will just re do the images with the 'important' bit at the left hand end.

Yes I had problems with that as well. As far as I can see it seems that you can only get that effect with background images. (You could scale the whole image up and down with the div but then the image gets distorted slightly, so its not really a viable alternative.)

I assumed it had been discounted but I have seen it used to good effect before. A quick test on Mediaman's image seems to indicate that it works ok but you do get the annoying hourglass showing. I've only tried it with the same image but it would be worth trying with multiple images.

I use IE6 xp and the hourglass just flicks on and off very quickly. I don't really get any flicker just the hourglass.

I think its an excellent technique and if we could just kill the hourglass it would be even better. (My original examples don't have flicker/hourglass because its the foreground image that gets hidden and foreground images get cached whereas bg images don't seem to.)

I looked at your CSS and cant even see how/where you have the hover image - strange.

There is only one image. You have the top part of the image showing and the hover state is the bottom part of the image which isn't showing. You just then flip the background position to show each part of the image as required. It should happen very quickly.

Ah - that image above is just one single image, with both rollover images in it. And there is a "window" of maybe a mask would more accuratly describe it which you can see a 200x22 pixel gap. Basically the CSS shifts the background image up and down (and you can only see whats within that "window").