rollover stuff...

[shiato storm]

right, trying to think up a front page and pondering this idea; there's an image on the page 600x400 pixies made up of 9 equal sections in the same 3:2 ratio - like a 0's and X's board. in each section is an image/thumbnail, which is a link to a part of the site i.e. a close up of a flower leads to the macro part of the gallery. but what I'm trying to work out is how when you run the mouse over one of the thumbnails do you get the others to 'grey out' and the one you hover over stay coloured. see below for examples...



here is a mock up, all nine (bar the b&w one in the corner) are colour images, so when you run the mouse over one of the squares - say some rowing to get to the rowing gallery it looks like this:



the effect I guess could be de-sat, or de-sat and blur a little...?



I have in mind the change not being 'snap' but a touch on the gradual fade side - smooth yet quick transition i.e. if I moved over another block the transition would be smooth rather than sudden flip on/off of colour but still quite rapid (does that make sense?). if anyone can offer some great wisdom I'd be very grateful (thats anything upto and including: "daft idea, here's a barge pole and don't even touch it with that").


edit: i'm guessing I'd have to put 18 images on the server, two of each image, figure out a way of saying 'when the mouse is in this 600x400 box all are the de-sat image EXCEPT the mouse-over one...' and then add the fade in/out details once that basic rule is set down.
is that the right sort of logic?

[arthurleung]

Try using flash?

[shiato storm]

trying to avoid flash...i don't want to use it on my site

[GDVS]

Last time I wanted to do this I used this code. Worked fine and is pretty simple to understand.

[GDVS]

To reply to myself, I did some experimentation with a script normally used to fade an image up on rollover and came up with this. I think the slow fade is quite nice and it's pretty easy to do with the script I snarfed from www.javascript-fx.com. The page I made isn't valid because I didn't set the table cell backgrounds with CSS (too much effort for a demo) but it would validate if done properly.

The script used is free for commercial and non-commercial use so long as you leave the copyright in the script and the acknowledgement in the HEAD section alone (view source to see what I mean).

[shiato storm]

wow that example's thats just what i'm after, cheers!!

[GDVS]

No worries, hope it helps. You can also alter the speed of the fade in the .js file, lower values is slower.