I'm trying to implement an image rollover for the navigation menu on my site, but am having trouble recreating what the original theme creators did. The original image is here: http://www.elecwarehouse.com/skin/frontend/em0006/default/images/bg_menu.gif. You can see that there's a large space in the image which the original designers were able to remove so that the image would resize accordingly depending on the length of the text for the menu item.
I've installed an extension that changes the format of the menu but haven't been able to figure out how to re-implement the original look of the tabs. Can anyone tell me how this can be done?
Hi John, Investigate
Investigate http://www.alistapart.com/articles/slidingdoors/ it's a popular technique for doing what you are after.
Thanks Tony. I have read
Hi John, Not sure exactly
Not sure exactly what you are trying to do without the whole picture. I'm assuming this is meant to run behind the whole menu.
You should be able to apply the same technique to a div, you may just need to extend the images and put one of the backgrounds on an element inside the div like the UL.
I would start by cutting the image or extending it, so it will cover the whole area.
At the moment you have one image: "< ==========>".
You can either extend the image like "< =============================>".
Or you could have 2 images like "<================", "===============->" . (here you use both images as backgrounds on different elements, one ontop of the other)
Or 3 images like "<", "=", ">". (this on the middle image is repeated as a background and the others can be as image elements or backgrounds of other elements.