I'm playing around with a wordpress template and I noticed that the button .gif's are not stored as a "straight across" button image -- the button is on two lines.
(image attached)
I am guessing that this method allows the button to expand as needed to match the size of the title of the pages - but I don't know.
Can someone pleas explain why and how this is done?
Thanks,
R

Hi rangy,
The double line method is used for rollovers i.e. The top is usually the normal state and the bottom the state when the user rolls over.

Thanks for the fast reply. But how it is that it's seems that you have 98% on the left, and then 2% on the right? And the image seems the same? Do know of any resources I could look up to see this technique explained in more detail? I did a search for what you said above and I didn't find much.
Thanks again.

is that image one image or two?

Image one. Here is image two. (nav-hover).
(Also included is button-back which attached als, but it doesn't seem relevant to the nav. It's probably something else? Or maybe it's the 'template'?) But here it is anyway.
Thanks.

Hi rangy,
The image button-back sits behind nav-hover. When you roll over the button it should then have a blue background with the orange line on the right hand side from nav-hover (bottom section). i.e. If you divide nav-hover into 2 parts the main image you see is in the top section and when you rollover you'll see the lower section of nav-hover overlaying the button-back image. Think of it like a piece of film strip with 2 negatives that only has a hole with space for one of those and therefore the film strip is moved up to view the lower image and down to view the upper image. I'm not exactly sure what this method is referred to, it is used though in Wordpress as well as in other Open Source Scripts such as Joomla.

Thanks. I'll try to find more about how it's done.
And BTW. I gave the wrong second rollover image. This red one below is the main nav, and the orange one above is the rollover. That's why I said I don't know where the blue fits in. The red is the baseline and the orange is the rollover.
I can change it by editing the image and re-saving it, but I wanted to understand the design concept.
Maybe Joomla help will have something.
Thank you.