Scrolling Images Within Text Blocks Example

This example demonstrates that you can insert images within text blocks so that they can be scrolled. This is useful for things like software simulations with long menus or any image that you would not want to scale down to fit within the height of the page.

To insert an image into a text block, double-click in the text block so that the insertion cursor begins to blink. Then choose Image File from the Image menu in the Add Image group on the Insert ribbon and select the image you wish to add from the dialog box. Alternately, you can right-click within the text block and choose Insert > Image from the context menu. And don’t forget to check the Vertical Scroll property on the Properties ribbon for the text block if you want it to scroll.

In the Title Explorer, you will see that the image has been attached to the text block. You can even add multiple images to a single text block if you like. And the images can be resized independent of the text block.

To download the Lectora 16 AWT, click the Download Lectora File button on this page. To download the Lectora Online version, click the Scrolling_Images_Within_Text_Blocks button beneath the preview image.

Tags: , , , , , ,


  1. Profile photo of Jason Dalrymple
    Jason Dalrymple

    I was thinking about this type of functionality not very long ago while developing a simulation for a web-based app! Thanks for posting this!

  2. Profile photo of gary moulton
    gary moulton

    Hi Wendy

    This is great. Is there an option to add a horizontal scrollbar to images? I am developing a simulation and some of the images are too wide to fit on the page.

    Great work.


    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Thank you, Gary!

      I’m not sure why, but there is no built-in “Horizontal Scroll” property for a text box. But I found that you CAN do it yourself by adding a little bit of CSS code to your page, and declaring your custom CSS class on the text box. The CSS would look something like this:

      .horizontalscroll {
      width: 450px !important;
      height: 255px !important;
      overflow-y: hidden !important;
      overflow-x: auto !important;

      If you need help implementing this in your Lectora title, I’d be happy to help! You can email me at

  3. Profile photo of Daryl Fleary
    Daryl Fleary

    Another way to do it is to put your image on a page by itself in your “extras” chapter (i.e., the place you put your pop-ups and other items users will never get to using navigation). Size that page to the same size as the image. Then on the page where you want the image to display (and scroll), add a Web Window object with the window source of “Page in Title”. Select your image page, Finally, on the Style ribbon for the Web Window be sure to set Scrollbar = Yes (or Auto).

Your email address will not be published. Required fields are marked *