Copyright © 2000-2009 MultiMedia Soft 
Return to index  
 
How to create buttons collection with (or without) rollovers 
Button collections are useful for creating HTML and JavaScript navigation bars. All the buttons will have the same appearance and properties, only the Caption text will differ. 
The button(s) appearance must be set from the Main screen by setting the desired properties through the available Tabs. Once you have setup the button(s) appearance, you are ready to create a new collection. 
The starting point is the following menu item: 
 
that will open the dialog box below: 
 
As you can see, by default the "Buttons list" is initially empty: this list allows the management of every item using the following four buttons: 
: Creates/insert a new item. 
 : Deletes the selected item. 
: Moves down the selected item. 
: Moves up the selected item. 
You can now fill the "Buttons list" with as many caption texts you need as in the image below (note that a collection can be loaded or saved at any time by pressing the corresponding buttons "Load buttons list" and "Save buttons list".): 
 
 
Now let's see what we can do with the items above: 
  • Generate pictures (without Rollover) 
  • Generate pictures and HTML code (without Rollover) 
  • Generate pictures, HTML and JavaScript code (with Rollover) 
  • Advanced topics 
  • Adding URLs to a collection 
  • Dealing with UNICODE characters 
  •  
    Generate pictures (without Rollover) 
    After having inserted the needed items inside the "Buttons list", select the "Generate pictures (no Rollover)" radio button and click the "Generate collection" button. 
     
    the sample above will generate five buttons with the same look but with different caption texts. It's important to note that the number of generated images could be higher than five if, inside the Options dialog box, you have chosen to export other button states also.  
    If the collection should be generated correctly, you will see a report dialog box like the one below: 
     
    As you can see, this report helps to remember in which folder of your PC the images have been saved: this folder will be obviously the one selected inside the Options dialog box. 
    Note that the "list1_" prefix has been added to the generated filenames: this prefix can be of help if you need to create more than one collection having the same items. 
     
    Generate pictures and HTML code  (without Rollover) 
    After having inserted the needed items inside the "Buttons list", select the "Generate pictures and HTML code (no Rollover)" radio button: you will see that the "Generate collection" button will automatically change its caption text into "Preview collection":  
     
    clicking the "Preview collection" button will allow to have a taste of the look the navigation bar inside a simple web page and decide if it fits your needs: 
     
    if the navigation bar doesn't fit your needs, click the "Cancel" button and go back to the Collection dialog box. Note that in this case (and by default) the navigation bar has a vertical style: if you prefer to have a horizontal style, simply check the relative radio button as in the screenshot below: 
     
    and you will get a horizontal navigation bar like the one below: 
     
    Once you are satisfied with the results seen inside the Preview window, simply click the "Export Collection" button and check the results on the report dialog box. 
     
    note that this time the application has generated not only the picture files of the various 3D buttons but also a HTML file that you can use as a starting point for your final web page. 
     
    Generate pictures, HTML and JavaScript code  (with Rollover) 
    After having inserted the needed items inside the "Buttons list", select the "Generate pictures, HTML and JavaScript code (with Rollover)" radio button: you will see that the "Generate collection" button will automatically change its caption text into "Preview collection"; as a further action, the user interface will enable the choice of three different kind of rollovers as shown below: 
     
    the available rollover are as follows: 
  • Two-states Rollover with MouseOver condition: This option will cause the application to generate the JavaScript code for a two-states Rollover effect: the "selected" state will be shown on the Button Preview Pane when the mouse is over the button area. 
  • Two-states Rollover with Pressed condition: This option will cause the application to generate the JavaScript code for a two-states Rollover effect: the "selected" state will be shown on the Button Preview Pane when the button is pressed. 
  • Three-states Rollover with MouseOver and Pressed condition: This option will cause the application to generate the JavaScript code for a three-states Rollover effect: the rollover effect will be identical to the one you can see on the Button Preview Pane when moving the mouse over the button and then pressing it. 
  • After the choice of the preferred Rollover, clicking the "Preview collection" button will allow to have a taste of the look the navigation bar inside a simple web page and decide if it fits your needs: 
     
    if you roll the mouse over the navigation bar preview, you will already have a taste of the Rollover look. Obviously, also in this case you can decide to have a horizontal navigation bar as described in the previous paragraph. 
    Once you are satisfied with the results seen inside the Preview window, simply click the "Export Collection" button and check the results on the report dialog box. 
     
    note that this time the application has generated several files (one picture for each button's state) and also a HTML file that you can use as a starting point for your final web page: this HTML file will already contain the JavaScript code needed by the Rollover effect. 
     
    Advanced topics 
  • Adding URLs to a collection 
  • When generating a navigation bar (with or without Rollovers), you can set the URL that will be opened by a certain 3D button by adding the sequence \@@ followed by the URL. 
    For example: 
    Products\@@http://www.multimediasoft.com/products 
    This will generate a 3D button with caption "Products" linked to the URL http://www.multimediasoft.com/products; in the picture below you can see how this will appear with our collection: 
     
    If you know something about HTML code, the provided URLs will be placed inside the <a href="URL"> tag. 
     
  • Dealing with UNICODE characters 
  • When generating a navigation bar (with or without Rollovers) that contains UNICODE characters (for example Chinese characters) like the one below: 
     
    the generated HTML code will be automatically saved in UNICODE, so each characters will be made up of two bytes. 
    Clicking the "Preview collection" button will allow to have a taste of the look the navigation bar: 
     
    clicking the "Export Collection" button will display the usual report dialog box 
     
    Note that in this case the items filenames have been generated using a unique filename instead of using each button's caption text: this is required to avoid errors inside the HTML and JavaScript code. 
     
     
     
     
     
     
    Copyright © 2000-2009 MultiMedia Soft 
    Return to index