variables-action overlapping textboxes

New Newbie-Question:)

Hi everyone!

I try to explain my problem:

Text 1 on the left, graphic on the right. The graphic is interactiv: You can click on it and textboxes appear. It is possible to open all of them if you want. Some of them appear on the left--> so I want text 1 become bale as long as textboxes are shown on the left side.

First question:

I created a second text with the same content, but the fontcolor is grey. Right way?

Second question:

How can I organize it that the text is pale as long as one of the boxes is shown? The show/not show-action is not a solution. Because you click, pale text, box 1 appears and you don't close that one but open a second box --> no pale text anymore.

I'm sure there must be a way with variables (Show pale text as long as one of the boxes 1-3 is shown) - but how can I define that?

Thank you!

Discussion (3)

There are several way to make the text appear pale. In my example I'm using a white shape with reduced opacity. A variable checks whether one of the two textfields that lay over the main text on the left is visible and hides the shape only if both textfields are invisible.

Tim

Allthough Tim's solution is good and works perfect on designs with a solid background in your design, it has a disadvantage when your design has photos, textures or gradients in the background. In that case you might want to target the textfield itself and change color or opacity with javascript.

Tim is correct (as always). Placing a semi-transparent image over text is a better option. Maintaining TWO identical text boxes is too much, well, maintenance. You will have to make all the changes twice, translate twice, fix errors twice, etc etc. And hiding the black text and showing the gray text is two actions, not one ("show gray overlay").

Discussions have been disabled for this post