Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had a feeling it wouldnt be possible to do it with javascript.

    Thanks for the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •