Dynamically swap images based on user interaction

[Clifton]

Task:

• Dynamically replace one image on a page with another one.

Procedure:

1. Draw a field on the page that is sized for the images you want to display. Let's name it "My Pics"
2. Type the following text in the field "My Pics":
   <img src="../images/%1" style="width:100%; height:100%;" />
   Like this:
   

   

   on load page for field "My Pics"

   Image 2.png (3.37 KiB) Viewed 5925 times

3. Create global variables called img and tmpHTML
4. On load page for field "My Pics" . . .
   Populate the global variable img with our boiler plate html tag (text of field "My Pics").
   

   

   field "My Pics" text

   Image 1.png (2.45 KiB) Viewed 5941 times

   NOTE: the not (not) img = false condition evaluates whether the global variable has already been set. The expression will evaluate to true if img has already been set.
5. Copy all of the images you want to switch between into a folder called images and put the folder in the same folder as your tbk. Then flag that folder for inclusion in your export.
   

   

   Add folders to DHTML export tree with images

   Image 3.png (81.25 KiB) Viewed 5941 times

6. Draw a list box and type in a list of valid image names.
   Something like this:
   

   

   Select List Box

   Image 4.png (1.42 KiB) Viewed 5941 times

7. Create these actions for On select for the list box:
   

   

   List Box on select

   Image 5.png (2.91 KiB) Viewed 5941 times

   Where pgReplace() parameters look like this:
   

   

   pgReplace() parameters

   Image 6.png (21.35 KiB) Viewed 5941 times

   AND setHTMLContent() parameters look like this:
   

   

   setHTMLContent() parameters

   Image 7.png (20.97 KiB) Viewed 5941 times

8. Export the page; clicking on a image in the list box should dynamically change the image displayed in the field.

[PetrH]

This worked great. Keeps my page size down so it loads quickly.

I think you might be missing a close-quote in step 2.

I've added a couple of fadeObject() function calls to my implimentation to dress up the presentation of each new image. I need to work up a way to fade the field before loading the next image so that I have a nice fade out, then fade in, presentation.

[PetrH]

This worked great. Keeps my page much smaller than if I had to load all images on the base page.

[Clifton]

Thanks Peter regarding the note on the typo in step 2. I updated the pic and included another little detail that it is good to know when entering HTML code into fields. You can use comment tags to remind yourself of what the code does as shown in the updated pic for step 2.