Inserting an image (jpg or gif) into spry widget

Question

creating a simple Spry dropdown menu.
After excessive CSS tweaking, everything looks good except
for being able to display 2 gifs (one when the menu is viewed and
one when the mouse hovers over the menu item).
Is it possible to insert these gifs into the menu? or do I
need to look somewhere else?
Thanks

Answer 1

Not a problem. I just wanted to make sure you had a little
understanding before diving too far in.
First thing you should have open while doing this is your
document (just so you can see what is going on) and the
SpryMenuBarHorizontal.css since I assume you are using a Horizontal
menu, but if this is wrong feel free to correct me.
Now first take note this example is the third one. Then in
the source code you will see the a group of code near the top with
4 parts that begin with #MenuBar3. Now when you look at your CSS
document (the one you previously opened) you will see that
everything begins with ul.MenuBarHorizontal. This is actually a
reference to the same item. To explain this look at the following
example in the source code from the third link:
#MenuBar3 a.MenuBarItemHover, #MenuBar3
a.MenuBarItemSubmenuHover, #MenuBar3 a.MenuBarSubmenuVisible {
background-image: url(images/itemgradient-hover.gif);
background-repeat: repeat-x;
Now on line 104 (assuming you have not changed anything too
much) you should see the same beginning, but instead of #MenuBar3
you will see ul.MenuBarHorizontal. The default attributes for that
area are a background-color and foreground color. Images will
always overwrite colors so you can just paste what is in between
the { } from the source code of the Adobe page to your CSS page.
Obviously the URL will change to the path to your own image. Now if
something doesn't exist like this part from the Adobe source:
#MenuBar3 li a {
background-color: transparent;
Just make your own CSS entry in that document with the
substitution mentioned before. So you would end up with:
ul.MenuBarHorizontal li a {
background-color:transparent;
Unfortunately this is the way these types of menus are done
although I would suspect since the Spry is only listed as beta at
this point it is to be expected. Hopefully this has made some sense
to you. If not feel free to post back and I would be glad to
explain this further.