making a GUI with lots of buttons but few images.

[Kumagoro]

I wrote a program a while back which used lots of images as buttons, but in doing so it made it really slow to download (and generally in efficient).

The program runs ok but there is literally 100s of images in the gui

the prog is at www.angelfire.com/music4/oldskool0

click on the supa kana image to launch it.. it will take a while (i mean a long while to load, it will be mostly a white maximised screen at the start.)

Each of those buttons is made on 4 images. the up the down the off and the highlighted. As you can see with a 100+ buttons thats more the 400 images on the screen.

Can someone recommend a different way of producing the same effect (i.e. not using built in html buttons.) which would use vastly fewer images.

The prog itself is written in javascript. what other prog languages would be suitable? I was thinking maybe FLASH Action Script might be ok as i can make it an app then.

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

I thought that i could re do the images and have the up down highlighted and off without any writing on (and re use the same 4 buttons again and again) Then have the writing on seperate ones and overlay then with transparency.

Does this make sense?

I think this will reduce the amount of images overall, make them smaller in size and i know this can be done.

Is there a better way to do it?

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

I would like to know if this is possible the most

I have thought of one other way to do it but i have no idea if it is at all possible.

rather than have each button individual, make them all one image. i.e. the up buttons would be on one image (with transparency inbetween) the down buttons would be one image along with the off and highlighted.

Therefore i would only need 5 Images in total and just layer them on top of each other. If i did this however when you click on one button all the buttons will go down and not individually.

TO get around this i thought it might be possible to use a individual transparent images over each button. BUT is it possible to traget a specific layer to show. for example if i push the button down it will show only the second layer (the button down layer) through that little transparent window.
there by making the top layer become transparent.

Is this possible or is there another way of doing something like this?

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

I was never any good at programming and dont really know any terminology so any help is welcome.

[Iain]

You can do this in CSS in a number of ways

1) Remove the image completely and use coloured backgrounds and borders to gain a pseudo-graphical effect
2) Use one big image as a background and then move it's x-y co-ordinates in CSS to give the illusion of a changed image e.g.

.button li a {
background: #ffffff url(http://www.site.com/image.gif) 121px 50% no-repeat;}
.button li a:visited {
background: url(http://www.site.com/image.gif) -865px 50% no-repeat;}
.button li a:hover {
background: url(http://www.site.com/image.gif) -381px 50% no-repeat;}

what this would do is given a div called button it would change the background by moving the background image to the left a set number of pixels depending on the state e.g. on hover it would go to -381px and so on.

[Kumagoro]

1)

I dont really understand very well do you know of any website example of this or what people genrally call that kind of thing?

2)

I can sort of visualise what you are saying but I cant see how it works exactly.

Im assuming that each button would still have to be individual, as if i were to move the whole image every button would still appear to change.

Is what you are saying like this.

I should combine all 4 images into one? like this;

---------|IMAGE2|
|IMAGE3||IMAGE1||IMAGE4|

Then when i want image 2 to show i shift it down, 4 left and 3 right?

This seems like quite a nice answer (athough i would have to make a big change in my code) I guess my background image would therefore be the top layer and i would need to include some transparent windows for each button?

If it isnt what you meant could you explain it a bit more.

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

Thanks a lot Az its given me some new ideas.

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

Anyone know if its possible to focus on indivdual layers?