21 Wow...

I’ve seen Pixy’s hover technique, and I’ve built a couple sprite engines in my lifetime. I don’t know why this didn’t occur to me. Very cool.

I can imagine several uses for this other than hover effects… I’ll try a few things and see what I come up with.

posted at 12:32 pm on March 5, 2004 by Chris Vincent

22 Excellent article Dave

Along with Doug Bowman’s sliding doors article, easily the best thing I’ve read on here since the relaunch. I look forwards to your next article.

I definately plan to use this on the new lastfield site to replace the highlighting UK map we use on our contact page.

posted at 12:40 pm on March 5, 2004 by Luke Redpath

23 Degrading...

For Jason. M…

Perhaps they don’t appear to be degrading well as Dave hasn’t put the list text in any of his examples? If the text was there, then you would see a fine unordered list, or at least you should be able to.

Perhaps Dave would consider adding list text to his final examples to demonstrate how it degrades?

posted at 12:45 pm on March 5, 2004 by Luke Redpath

24 I'm surprised that things don't fall apart when yo

[quote]The big difference is where we position the <li>s; the goal is to surround each graphical element with a box that tightly hugs the edges.[/quote]

I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!

Any idea why this works? Could it be that if it’s not clear which box you want, the browser simply does nothing?

Very nice!

posted at 12:52 pm on March 5, 2004 by azw

25 NN4.x

Here’s a [url=“http://www.mezzoblue.com/tests/sprites/blobs.html”]test case[/url] with actual text in each link for the benefit of testing in NN4.x. Note that I’ve used Phark image replacement here, which doesn’t work in IE5.

“I’m surprised that things don’t fall apart when you mouse over a place where two boxes overlap!”

Whichever link has a higher z-index gets priority — so in a corner where two boxes overlap, in this case the one that appears later in the source code is the one that gets triggered, and the other is ignored. You can pick and choose which links get priority by explicitly setting a z-index value, but I decided to just let them fight it out in my examples.

posted at 01:11 pm on March 5, 2004 by Dave S.

26 Damn

Damn, doesn’t seem to work fully in Mozilla 1.6 on XP. (I used 1.5 before.) The two examples, one with “borders turned on”, do nothing. Yet the final “So there you have it” version does work!

Same result in Firefox 0.8.

posted at 02:22 pm on March 5, 2004 by Chris Hester

27 Brilliant!

I’ve done something alike with javascript mouse-overs and not slicing the images up, but I never seen it done with CSS before.

Eric Meyer’s famous spiralling shelve demo springs to mind, but this one actually works in IE!

One mayor plus using larger images is that once the two images are loaded, the caching of the images make the rollovers fast, while pages with a lot of sliced up images tend to have a small delay.

posted at 02:56 pm on March 5, 2004 by Martijn ten Napel

28 Following up

Chris — the examples you cited weren’t meant to work at that point in the narrative; only the final examples in each section are fully functioning with mouseovers.

Martijn — funny you should mention the Complex Spiral, I considered rebuilding it with background-image positioning for this article, but decided that was too much of a tangent. I think it can be done, it just wouldn’t end up fixed-position.

posted at 03:23 pm on March 5, 2004 by Dave S.

29 Impressive!

I’ll just add to the compliments, I really like your code, its very clean and elegant and it degrades nicely.

Bravo!

posted at 04:01 pm on March 5, 2004 by Matt Irwin

30 Complex spiral

Great article, it lacks a bit in code originality, since it uses lot of the latest articles’ code (Image maps, rollovers, FIR, etc), but it certainly gives users a lot of ideas and code examples. It’s what everyone who reads ALA has been thinking of doing once, but never came round to. A really useful reference, definately a keeper.

“I think it can be done, it just wouldn’t end up fixed-position.”

Wouldn’t you just use the combination of these two rules:

background-attachment: fixed;
and
background-position: -10px -20px; (example values)

posted at 04:29 pm on March 5, 2004 by Simon Meskens