Expanding image toggles

Navigation:  More Advanced Procedures > Toggles: Expanding Text and Images >

Expanding image toggles

Previous pageReturn to chapter overviewNext page

Show/Hide Hidden Text

Expanding image toggles like the one on the right use a small "display version" of the image that the user can click on to display the full version. This can make your topic pages much easier to read because the larger versions of the image are only displayed when needed.

Help & Manual does all the work for you. You just select the full-size image you want to display and the smaller version is generated automatically.

Click to expand image
Click on the image
to expand it!
Click to expand/collapseHow to create an expanding image toggle

To make an expanding image toggle you just select the image you want to use, choose a zoom factor for the thumbnail display version and enter tooltips and/or captions if you want to use them.

1.Click in your topic in the place where you want to insert your expanding image toggle. Don't select any text (it would be deleted when you insert the image toggle).

2.Select the Insert Toggle tool btn_insert_toggle in Write > Insert Object and select the Screenshot Toggle option at the top of the dialog.

DLG_InsertToggleIMG

See Insert Toggle for details on all the settings in the Insert Toggle dialog.

3.Select the image you want to toggle by clicking on the BTN_Browse browse button in the Picture file name: field. This file should be stored in your graphics folder or project folder, just like all the other graphics in your project.

4.Select a zoom factor for the preview version and enter tooltips and captions for the expanded and collapsed versions.

5.Click on OK to insert your expanding image toggle.

Click to expand/collapseUsing a different image for the preview

You can specify a completely different image for the preview/collapsed state version. For example, you could use a button image that the user clicks on to display a larger image, like this:

Click to display image!

Just select the Picture: option beneath When collapsed, use different settings... and then select the image you want to use.

When you use this option you are completely responsible for the size and appearance of the collapsed state version. Help & Manual will not apply a zoom factor for you.

You can enter separate captions and tooltips for the preview and the expanded image.

Click to expand/collapseConverting existing images into toggles

You can convert any image in your project into a toggle image. Just right-click on the image and select Picture > Convert Picture to a Toggle... The procedure is then the same as for inserting a new image toggle.

Click to expand/collapseFormatting the toggle image with CSS

The CSS class image-toggle is automatically applied to the <img> tag for your image toggles. If you know how to use CSS and HTML you can add style definitions for this class to your HTML template to control the formatting of your toggle image. See Formatting toggles with CSS for details.

See also:

Formatting toggles with CSS

Toggle IDs

Editing and copying toggles