Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How do I use a radio button to enable a image

Avatar

Avatar
Validate 1
Level 1
saskiahope
Level 1

Likes

0 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
saskiahope
Level 1

Likes

0 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
saskiahope
Level 1

15-08-2012

I'm trying to figure out how to use a radio button to enable a banner/background image so I guess my question is two fold:

1. How do I create a background image?

2. How do I use a radio button such that when it = Yes, the background image appears.

Thanks!

View Entire Topic

Avatar

Avatar
Validate 1
Level 2
past-tense
Level 2

Likes

9 likes

Total Posts

85 posts

Correct Reply

10 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
past-tense
Level 2

Likes

9 likes

Total Posts

85 posts

Correct Reply

10 solutions
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
past-tense
Level 2

15-08-2012

Hey there,

The first methos that comes to mind for me is to use a formvariable to keep track of the background visibility, then have the image in a readOnly image field on the master page. After that, use a little javascript to wire it all up.

How To:

Add a form variable to the form:

- File, Form Properties

- Click "Variables" tab

- Click + button

- Enter a variable name (i.e. BackgroundVisibility)

- Set value to "hidden" (without the quotes)

Add background to Master Page:

- Click "Master Page" tab above form (nevt to "Design View Tab)

     - If "Master Page" Tab isn't visible, Right click on the gray area to the right of the tabs, and make suer "Master Pages" is checked off in the contect menu that appears.

- Insert an Image Field and resize to the area that you want the background image to fill

     - Note* Make sure you use an image field, not an image. Image fields let you use scripts, images don't.

- Format the image field as desired (i.e. remove caption, add border, etc.)

- Select the image to use for the background, by setting the URL field in the image object properties.

- Check "Embed Image Data" check box below URL in image object properties.

- Add an initize script (Javascript) to the image field:

     this.access = "readOnly";

** note the camel case used in "readOnly" it is case sensitive.

- Add a layout:ready script (Javascript) to the image field:

     this.presence = BackgroundVisibility.value;

** Note that BackgroundVisibility should be the same as the name of the variable that you added in the last step.

Wire it all together via script:

- Add a check box to the actual form (not the masterpage)

- Add a change script to the check box

     BackgroundVisibility.value = this.rawValue == 1 ? "visible" : "hidden";

** Again, BackgroundVisibility should be the same name used for the form variable. The above script uses a ternary operator... which is similar to a condensed if/then/else

I know that looks like a lot of work, but that's just because I was being very specific. In actuality, it's just a form variable, an image field, a check box and three one-line scripts. Very simple.

Let me know if you have any issues, or if I didn't explain something well enough.

-Scott

Note*** I just realized that you asked for a radio button, not a check box... the above still works, so long as "Yes" is given a value of 1 on the binding tab of the radio group.

Note the second*** I just added a step to the first bit... Specifically, setting the form variable value to "hidden" this is the default state of the background image.