Using the Image control as a hot spot

In this application, we will alter the SDI interface slightly by introducing a custom-drawn toolbar. The forms will be loaded by clicking on one of the buttons. The click event is handled by placing a transparent Image control over the button area. To give the illusion of the button being pressed, I’ve gone for the option with the least code, at the expense of resources. There are many techniques for giving the impression of a button click on a graphic, and I’ll cover a few at the end of this section. You’ll see others as we go through the chapter. You will find this application on the CD as HotRec. The application, as it appears at design time, is shown in Figure 11-4.

Figure 11-4 The image hot spot application in development mode

As you can see, I’ve created a copy of the toolbar for each instance of a button depression, which will be off the screen at run time. When a particular Image control is clicked, the relevant bitmap is copied to the display area.

Caution When you are using the Image control or any other Visual Basic control in a fixed position interface, the resolution in which you design and the font size can be significant. To avoid problems and to provide an interface that is resolution independent, you need to use the twipsperpixel properties of the Image control to work in pixels. As we will see later, this is not a problem for the irregular hot spot applications because all Windows API calls are in pixels.

The buttons bitmap is covered with a transparent Image control, with its mouse events coded to simulate a mouse click. The business end of the MouseDown event is as follows:

' Work out where we are in terms of pixels.
nXOffset = X \ Screen.TwipsPerPixelX
nYOffset = Y \ Screen.TwipsPerPixelY

' Determine whether we hit a button. (We must have if Y is in
' range.) 
If nYOffset > START_Y And nYOffset < END_Y Then
    ' We hit one! Determine which button.
    Select Case nXOffset

        Case START_INDEX To END_INDEX
            picTools(0).Picture = picTools(1).Picture
            frmIndex.SetChild
            frmIndex.fraIndex.BackColor = 0
        Case START_PACK To END_PACK
            picTools(0).Picture = picTools(2).Picture
            frmPack.SetChild
            frmPack.fraPack.BackColor = 0
        Case START_EXIT To END_EXIT
            picTools(0).Picture = picTools(3).Picture
            Unload Me
        Case START_TEXT To END_TEXT
            picTools(0).Picture = picTools(4).Picture
            frmText.SetChild
            frmText.fraText.BackColor = 0
        Case START_HELP To END_HELP
            picTools(0).Picture = picTools(5).Picture
            MsgBox "Spoken help has not been activated"

            ' Have to reset in line because the MouseUp event
            ' will not trigger because of the OK click in the
            ' message box.
             picTools(0).Picture = picTools(6).Picture
        End Select

    End If
End Sub

Private Sub imgHot_MouseUp(Button As Integer, Shift As Integer, _
    X As Single, Y As Single)
' Set the toolbar back to a neutral state.
    picTools(0).Picture = picTools(6).Picture
End Sub

The MouseDown event loads the toolbar that has the relevant button in a down state. It determines the correct toolbar by the position of the mouse pointer (in x,y coordinates) on the image. A set of constants is used as the bounds of each section and is declared at the beginning of the event.

The MouseUp event reloads the neutral toolbar. That’s really all there is to it. As I said, I used the method with the least code, but it does serve to illustrate the technique and show how easy it is to use.