variable amount of images, layering images and transparency

[Mike Curwen]

Ok, so maybe my subject line has the answer (layers) but I'm not wanting to get heavy into DHTML and/or layers. It's only a whole area of HTML that I don't know enough about (kinda like what I'm posting about).

I have a web application that when you log in, you can perform more or less functions. And the functions are grouped under 'tabs'.

A screenshot exists here: http://prod1.gbgraphics.com/coolstuff/tabs.JPG

So right now, the images are all sized absolutely, sliced up and are stuck in a table row. The images have a width and height. Also, the tiny little piece of the background image (viewable between the two curves at the top of the tabs) is included with the tab images (ie: the tab is not a transparent gif that lets us "see through" to the background gradient).

My first question then, is it even possible to do this? Have one image sit on top of another? Almost like if the tr tag had a background image (the gradient) and each td cell contained a square image of a tab, with the curvy piece at the top being transparent. But of course, there's not tr image background attribute. So how to do it? Am I stuck with layers? will it even work with layers?

Second, because there are a variable amount of tabs, can the last piece at the right (the gradient that isn't covered by a tab) be made to 'stretch' to fit the remaining space? The background, which thankfully is not a gradient anymore, with the minimum amount of tabs (as shown in the screenshot) does not have any vertical patterns. So a 2pxl by 36 high pxl image of this background ought to be able to stretch and fill the last td tag. But can we do this in HTML? I'm thinking like how you can specify the body tag's background image be a very simple pattern and then have it 'fill'.

Thanks for any help.
[ July 25, 2003: Message edited by: Mike Curwen ]

[Eric Pascarello]

okay now this is not that bad of a problem, I am rather busy right now, but I can give a quick response.
Now lets look at the background first.
You want to look into CSS for this
You can set each td to a class and have the bg set to a specific location and repeat it in any direction. If I was at home, I could post the code.
Now for the images, there are 2 routes you can go.
First is DHTML/CSS Based
You change the z-index of the images which can be done rather easy. Set the ones in the back to 0 and he front to 1 and you got overlap
Second way is just multiple images with image swaps. Build a bunch of images in the up position and down position. When you click it, you just change the image to the right one.
If you want more details on something, just ask.
Eric

[Mike Curwen]

Hi Eric, I had a feeling I could count on you.

There are actually 3 images per tab already, and javascript swaps them out. There's one for 'selected' one for 'highlighted' (on mouse over) and 'not highlighted'.

So maybe what i want is a tr that is as tall as the tabs, and as wide as the background. And I'd place a single image as the bg using the style sheet. That single image is a horizontal slice of my gradient. Then I can just add as many tab images as I want "on top" of this bg image. And the transparent corners will allow my gradient to show through.

Does that sound right?

the existing javascript swapping code should take care of the 'neato' effect (if you hover over a tab, it will change appearance).

[Eric Pascarello]

Hey, I did not forget about you, I just do not have an internet connection at my new apartment yet. So you just want to dynamically position the bg of the table cells/row?