*
The moose likes HTML, CSS and JavaScript and the fly likes variable amount of images, layering images and transparency Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "variable amount of images, layering images and transparency " Watch "variable amount of images, layering images and transparency " New topic
Author

variable amount of images, layering images and transparency

Mike Curwen
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

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
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Ranch Hand

Joined: Feb 20, 2001
Posts: 3695

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
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: variable amount of images, layering images and transparency