HOWTO: Overlay Images Using Image List Controls

ID: Q125629

The information in this article applies to:

Microsoft Win32 Software Development Kit (SDK)

SUMMARY

Image lists provide an easy way to manage a group of bitmaps and draw them on the screen, without having to worry about calling CreateCompatibleDC(), SelectObject(), BitBlt(), StretchBlt(), and so on.

One interesting feature that image lists provide through the ImageList_Draw() API is the ability to overlay images -- that is, to draw an image transparently over another image. Calling ImageList_Draw() with the last parameter set to an index to an overlay mask instructs the image list to draw an image, and draw the overlay mask on top of it.

MORE INFORMATION

To overlay images correctly using image lists, follow these steps:

1. Create a bitmap that will have the images you want to draw as well as

   the overlay images you want drawn on top of these images.

   For example, say you have a bitmap of four 16x16 images:

    - a green circle.
    - a red circle.
    - a panda.
    - a frog.

2. Create an image list out of the bitmap you've created in step 1 by using

   ImageList_LoadImage() as shown here:

      hImageList = ImageList_LoadImage (hInst,
                                        "MyBitmap",
                                        16,
                                        4,
                                        RGB (255,0,0),
                                        IMAGE_BITMAP,
                                        0);

3. Decide which images you want to specify as overlay masks, and tag them

   as such by using the ImageList_SetOverlayImage() function. The following
   code specifies the panda and the frog (with 0-based index, this comes
   out to image 2 and 3) as overlay masks 1 and 2.

   NOTE: You can only specify up to four overlay masks per image list.

      ImageList_SetOverlayImage (hImageList,
                                 2,     // 0-based index to image list.
                                 1);    // 1-based index to overlay mask.

      ImageList_SetOverlayImage (hImageList,
                                 3,     // 0-based index to image list.
                                 2);    // 1-based index to overlay mask.

4. Draw the image. The following code draws the green circle (or image 0 in

   the example image list). Then it draws the panda (overlay image 1 in the
   example) on top of it.

      ImageList_Draw (hImageList,
                      0,    // 0-based index to imageList of image to draw.
                      hDC,   // handle to a DC.
                      16, 16 // (x,y) location to draw.
                      INDEXTOOVERLAYMASK (1));   // Overlay image #1.

Additional query words:

Keywords          : kbCtrl kbImgList kbNTOS351 kbNTOS400 kbGrpUser kbWinOS95 kbWinOS98 
Issue type        : kbhowto

Last Reviewed: January 2, 1999