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.
Use image styles with image toggles
Note that you can apply image styles to the image toggle preview to set a border and a standard width to an entire class of toggles.
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 in Write > Insert Object and select the Screenshot Toggle option at the top of the dialog.
Thumbnail: Sets the size of the preview image that the user clicks or taps on to display the full-size image.
% of picture size/document width: Makes the size of preview image a percentage of the original image size or of the document width. The second option makes the preview responsive and relative to the width of the current browser window. If the image is in a table the width will be relative to the table cell containing the toggle image.
Style: You can apply an image style to the image toggle preview to define a border and a standard width.
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 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.
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:
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 tool tips for the preview and the expanded image.
You can also use vector-based SVG images for image toggles. The procedure is exactly the same as when you use any other image type.
The only difference is that the smaller version of the image is a PNG with alpha transparency instead of an SVG. The SVG image will only be displayed for the full size version.
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.
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.
Before you do this, however, check out Image Styles, which cover most of the things you may want to apply to images with CSS, and they also work for PDF and Word.
browse button in the 