Dynamically Change Button Graphics

[Clifton]

While there are several methods for doing this, we are demonstrating the use of css stylesheets in this example.
CLICK HERE to view the exported content of this lesson.
 

1. Gather your button graphics, resize them so that each is the same size.
    
2. Put all the graphics into a common folder. In this case we are calling our folder [img].
    
3. Create a file called "button_styles.css" with the following content. SAVE the file in the [img] folder.
   NOTE: We named our swap graphics "1.png", "2.png", ... "8.png" to correspond with the name of objects on our page. You can use any naming convention that work in your project.
   
   

   Code: Select all

   .my_caption {
   /* Cross-browser approach! Works in IE8 too!
       Demonstrates you can change the button captions (optional) */
   font-family: Arial;
   font-size: 12pt;
   font-weight: bold;
   color: #D88537;
}
.btn_1, .btn_1:hover {
   background: url( ../img/1.png ) center center no-repeat !important;
}
.btn_2, .btn_2:hover {
   background: url( ../img/2.png ) center center no-repeat !important;
}
.btn_3, .btn_3:hover {
   background: url( ../img/3.png ) center center no-repeat !important;
}
.btn_4, .btn_4:hover {
   background: url( ../img/4.png ) center center no-repeat !important;
}
.btn_5, .btn_5:hover {
   background: url( ../img/5.png ) center center no-repeat !important;
}
.btn_6, .btn_6:hover {
   background: url( ../img/6.png ) center center no-repeat !important;
}
.btn_7, .btn_7:hover {
   background: url( ../img/7.png ) center center no-repeat !important;
}
.btn_8, .btn_8:hover {
   background: url( ../img/8.png ) center center no-repeat !important;
}


   
   
4. Add the [img] folder to the included export list using the PowerPac DHTML Export Tree Manager.
   

   

   DHTML Export Tree Manager - Adding the [img] folder

   Image 1.png (81.74 KiB) Viewed 4826 times

   
   
5. Create a button on your ToolBook page that is sized to the typical size of your graphics. Choose either a command button or a button with border style set to none. Add a caption for the button. We captioned our button "Dynamically changed button graphics" and named it "mySwitch".
    
6. Let's create a group of 8 objects named "1" through "8" and we will use this to trigger actions that will swap the graphics on the newly created button. We named the group "Selections".
   Here is how our layout looks:
   

   

   Page layout

   Image 3.png (12.29 KiB) Viewed 4826 times

   
   
7. Create an action for On load page for the group "Selections" that loads the css stylesheet we created earlier.
   

   

   Load the stylesheet.

   Image 6.png (17.24 KiB) Viewed 4826 times

   
   
8. Create an action that sets the button caption using pgButtonHTML() by setting the caption class to a selector from our stylesheet.
   

   

   Set button caption class

   Image 7.png (38.51 KiB) Viewed 4826 times

   
   
9. Create an On click action that dynamically changes the class name of our button to one of the selectors in the "button_styles.css" file. We use name of target on the group because it will return the name of the current item in the group that we clicked.
   

   

   Swap class name of button

   Image 8.png (17.36 KiB) Viewed 4826 times

   NOTE: Also set the parameter appendClasses = false. This parameter is only available in PowerPac v12.10 or greater.
    
10. Export the page. Click on any object in the group "Selections" and you should see the graphic in the button change to correspond to the png files in the [img] folder.

ENJOY!
DOWNLOAD SOURCE FILES AND TBK

buttonChanger.zip

Entire tutorial for download.
ToolBook v11.5 but can be recreated in any other version.

(109.59 KiB) Downloaded 413 times