I have several drop down menus which have several items on each. In
total that is 31 different options. Quite a bit of code went into making
the onmouseover events work, and it doesn't quite work well in all
browsers and it doesn't scale well (there is a lot of broken code in the
js).
The first part is suckerfish dropdowns which I got working fine. Then I
decided since each menu has several options, using sprites ALA
(http://www.alistapart.com/articles/sprites) would improve the situation
no end and remove the nasty JS once and for all. Anyway I encountered
some problems and thought it might be the dropdowns causing them so I
have temporarily removed them and then I realised (or I think I have) my
problem:
I have an image called menu1.gif. This menu has 5 options in it. When
you put they mouse over it they "light" up. Normally this would require
10 images, but now we are using just 1 and saving a potential 7 kb in
size. This is good.
Now the problem is when I try to set the :hover effects. The hover uses
background images which can only have an offset from the original, which
should allow me where to specify the new image from but it isn't
working. It either shows nothing, or all items. I think this is
because I am using multidimensional x rather than y like the article
did. I thought about moving the image so they were above each other but
that would cause the same problems.
I would prefer to have a single large image for each menu but I can't
see how I could do that. Now the only solution is to create a 31 images
with their off and on states. and have seperate CSS code for each -
something I would rather not do.
Any ideas?
Thanks, Graham Reeds.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
