Making a GUI with lots of buttons but few images.

I have written a program in javascript (my first) which uses over a 100 buttons.

I made these buttons using 4 individual images, UP, DOWN, OFF and HIGHLIGHTED.

When downloading from the internet it downloads very slowly as there are so many images (although small). Also its pretty inefficent.

I have thought of 3 ways in which to make it better.

1) Seperate the buttons and the text on the buttons. So i would have just one up one down one off and one highlighted image. Then use individual letter images which go on top of the button. I would still need up and down images for each letter but they would be transparent. I think this would download faster as the images could be smaller in bytes and there would be fewer but still a few hundred.

2) I combine the images for each button into one

---------|image1|
|image2||image3||image4|

then when i want to show the button down i move the image right and show image 2 etc.

This would make the images generally bigger but there would be few of them.
HOWEVER, as my buttons are so close together like below they will interfere with each other.

|button||button||button||button||button|
|button||button||button||button||button|
|button||button||button||button||button|

so i cant really use that it seems.


Does anyone have any other good ways to do it? is another language more suitable? I was thinking of using Flash Action Script as then i can make it into a standalone app.

-------------------------------------------------------------------------

3) I have had another idea but have no idea if it is possible at all in any language let alone javascript.

Basically i would use only 5 images:

1) the background including the up buttons all combined into one image.
2) the down button image (all in the same image)
3) the highligted button image (all in the same image)
4) the off button image (all in the same image)
5) and a transparent image the size of one button.

Now if i do it this way then then i click one button all of them will change.

IS THIS POSSIBLE (OR SOMETHING LIKE IT)

So what i want to know is this, IS it possible to focus on a particular layer through the transparent image?

for example if i had 4 layers could i tell the transparent image to only be transparent to layer 3.? If it cant be done in javascript what language could i do it in?

Is there any other way of doing something like this?

Any help is appreciated, unfortuantly i dont really understand terminology as this is my first program. I would search on how to do this but i have no idea what it would be called.

why don't you just use CSS and button tags. surely your buttons don't have to be graphical at all. wouldn't that simplify things?

Thanks for the info, I did a search for css buttons and most of the ones i found dont look very nice.. Currently the ones i use depress and look good when they do. The only depress ones i found didnt have a very good effect.

I will look around more to see how good they can be,

thanks again.

---

I would still like to know if it is possible to show certain areas of different layers through each other.

IS it possible to focus on a particular layer through the transparent image?

Nope directly. But you can "focus" (as u say) it using an event (say onclick) to fire a function which may develop a relationship (action/method) upon that particular layer. It is the same as to act upon an object using an action/event applied on another object, something usual in javascript.

Thus you must check which events are available in javascript to do the job.

I had a feeling it wouldnt be possible to do it with javascript.

Thanks for the help.