The difficult thing about the rollover action is that it requires all the image stages to be layers, which is the opposite of inline construction. However, with a tad of ingenuity this can be circumnavigated. For this example, let's say that we are creating rollover where each of the graphics is a 400px wide by 200px high rectangle.
Begin by adding an inline HTML box. Name it
rolloverWrapper, deselect the width field in the inspector, but set the max-width to 400px. Open the extended dialog and switch to the
<div style>tab. Add a listing with
widthas the name, and
100%as the value.
Draw three rollover graphics inside the
rolloverWrapperbox as layer items (not inline!). Name them
Align them on each-other and group them. Name the new group container
rolloverGraphic, and apply the Rollover Action to it. (For a more detailed set of instructions on this part, see the official documentation).
Open the extended dialog for that container, and in both the
<div>tabs, add entries with
classfor the name and
flexImagefor the value.
As always, save, publish, and test!