Include Images in the Popup Text or Caption
Return to the Index
How can I include images in my popups? How can I include images in the CAPTION?
This is run-of-the-mill OverLIB.

The TEXT argument can contain any html that will legally fit within a table cell. This includes images. Any normal parts of the <img> tag can be included, i.e. align=, border=, etc. The popup TEXT area will always be at least as large as the image (after scaling). See Examples #1-5.

The simplest way to put images into the CAPTION BAR is by using the CAPICON token. This is fast and easy, but offers none of the usual positioning or scaling controls. The image will always be at its full size, and just to the left of the centered CAPTION text. The popup CAPTION area will always be at least as large as the image. See example #6 below.

For more control, insert the image into the text of the CAPTION token. The CAPTION string can contain any html that will legally fit within a table cell. This includes images. Any normal parts of the <img> tag can be included, i.e. align=, border=, etc. The popup CAPTION area will always be at least as large as the image (after scaling). See Example #7-8 below.

The image can also be inserted through the BACKGROUND token. There are a lot of risks. See Example #9.

Each of these examples is discussed fully in the next section of this page.

1. Demonstrating an image in the popup TEXT

2. Demonstrating an image on the right in the popup TEXT

3. Demonstrating an image in the popup TEXT with no ALIGNment

4. Demonstrating an image and a bullet list in the popup TEXT

5. Demonstrating an image on the right and a bullet list in the popup TEXT

6. Demonstrating CAPICON with CAPTION text

7. Demonstrating vertical centering of the CAPTION next to the caption image

8. Demonstrating Image tag inside CAPTION text and resizing caption images

9. Demonstrating the use of BACKGROUND for images.

    The treatment is exactly the same as BACKGROUND= in your main page <BODY> tag. i.e. No Scaling, and the image will clip or tile to fill the window.
    The BACKGROUND image NEVER controls the size of the popup. The size of the popup is controlled by the contents of the the TEXT string, or by HEIGHT and WIDTH tokens (whichever is larger.)
    ADDITIONAL SIDE EFFECTS.
    If you use BACKGROUND, OverLIB will NOT provide borders or padding around the image.
    Also, OverLIB will not display the CAPTION BAR any time BACKGROUND is used. Therefore, you cannot expect to see the CLOSETEXT word, which means that you can not dismiss the popup if you have set STICKY.
  1. BACKGROUND image with no size and null TEXT. WIDTH is the OverLIB default (200 pixels) and HEIGHT is whatever the text requires (in this case, 0 pixels.)
  2. BACKGROUND image with HEIGHT,100 and null TEXT. WIDTH is the OverLIB default (200 pixels). Note horizontal tiling. HEIGHT is forced to 100 - which is smaller than the image height. Note vertical clipping.
  3. BACKGROUND image with TEXT. WIDTH is the OverLIB default (200 pixels). Note horizontal tiling. HEIGHT is whatever is required to enclose the text. Note vertical clipping. Obviously, an impractical way to size the popup for an image. Also note again that there is no border.
  4. BACKGROUND image with TEXT and cellPADding. In this example, I've added padding around the text by using PADX,20,20,PADY,20,20. WIDTH is still the OverLIB default (200 pixels). The padding is calculated inside the fixed width. This reduces the width available for the text (200-20-20=160 pixels), so the text line-wraps more often, and requires more lines, so the browser automatically uses more HEIGHT to enclose the text. There is no border or padding around the image.
  5. BACKGROUND image with HEIGHT and WIDTH specified. WIDTH=400 and HEIGHT=300, just to show the full tiling effect.
  6. BACKGROUND image with HEIGHT and WIDTH specified. WIDTH,85,HEIGHT,129 specified to exactly match the known size of the image. Note again that there are no borders or cellpadding, but you might like this effect for certain applications.

For MUCH MORE on BACKGROUNDs, see the BACKGROUND page of this tutorial.

10. Demonstrating a slideshow in the popup    Kill slideShow Popup
Please mind the quoting and concatenation rules if you try to cut this demo code. It will display with line wrapping on your browser, but the sentences within quotes have to be merged into a single line, or correctly concatenated, or they will not work in real life.

The TEXT strings are long. We will build them as separate strings outside the overlib() call. Normally, this would be done at one place in the <head> of the page. but for this tutorial, we build each TEXT string just before the overlib call so you can see all the parts together.

  • If you place your TEXT strings into an external array (and I recommend that you do), be sure to declare the array ONCE before you use it.
      <script type="text/javascript">
      TextStr = new Array();
      TextStr[1] = '................';
      TextStr[2] = '................';
      etc.
      </script>
In the HTML BODY, we add the links where required. Be sure the path to the images is complete. I've cheated on addresses in this listing. I use class=h to make the link appear without an underline over a yellow cell background. YMMV.

To view the popup again while reading the code, mouseover the link word with the yellow background.

You ALSO want the images to pre-load (so that the user doesn't have to wait for the images to download at the time he mouses over). See the Preload FAQ.

Please let me know if you encounter problems.Modified by REB,June 1, 2004