Clicking Parts of an Image

Clicking Parts of an Image in VB

Web-sites use image maps to make parts of
an image clickable. In the Star Trek picture,
we could make the people clickable (you can try it).

In Visual Basic, the process is a bit different than

a web-page. In VB, we must identify rectangles
where the user can click. We use coordinates
(numbers) to identify the rectangular regions.

The Frame on top of Captain Kirk is located
at (3200,2700) - that's the top-left corner -
and has width = 1300 and height = 2300.
That means the bottom right corner located
at (4500,5000).

In VB, we use an if command to check whether
the user clicks inside the rectangle, like this:

  if X > 3200 and X < 4500 and Y > 2700 and Y < 5000 then
     msgbox "Captain Kirk - played by William Shatner"
  end if

X and Y tell the horizontal and vertical coordinates
of the mouse-click. The command above checks that
X is between 3200 and 4500, and that Y is between
2700 and 5000. If so, it displays a message.

In computers, the coordinate system starts with
(0,0) at the top-left corner of the screen.
Larger X values move across the screen,
while larger Y values move DOWN the screen.
This is different than in mathematics, where the origin
is in the center of the graph, and Y values count UP.

In Visual Basic, the coordinates are measured in TWIPS rather than PIXELS. TWIPS are a lot smaller (and more accurate) than pixels, with something like 15 TWIPS per pixel.

How to Do It - VB Techniques

Find a Picture

Use a picture with several people in it. It could be a music group, or several movie stars, a sports team, etc. Copy it from Google images. It should be at least 400 x 300 pixels - otherwise it will be difficult to work with. Create a new Visual Basic project, and copy your image onto the form. Be sure to use an image box, not a picture box.

Finding Coordinates

You need to find the coordinates (positions) of the people. Make it easy on yourself:

Use a pencil and paper to write down the numbers
Use a frame control. Slide it over a person and resize it to just cover the person. Then read the left/top coordinates and the width/height at the top of the screen - write these numbers on paper.

Write the Code

Switch to the code window. Then open the objects menu and select image1.
Then open the events list and select MouseUp.

You will see the following subroutine header:

  Private Sub Image1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
     .... write your commands here ....
  end sub

This means: whenver you release the mouse button over image1, this subroutine will execute, and it will automatically know the X and Y coordinates of the mouse pointer.

You must write commands in the space provided. You need to write if..then.. commands to check the coordinates, and decide what message to show. For example:

   If X > 3200 And X < 4500 And Y > 2700 And Y < 5000 Then
      MsgBox "Captain Kirk - played by William Shatner"
   End If

You need to write one if..then.. command for each person in the picture.

If you use a frame to help find the coordinates, you need to move it outside the picture before running the program.

Other Commands

If you want to display more than just a little bit of text, do it like this:

 MsgBox "Mr Spock " & vbCrLf & _
  "  Leonard Nimoy played the logical vulcan." & vbCrLf & _
  "  His role was indispensible to the success of the show." & vbCrLf & _
  "  But he was so strongly identified with this character" & vbCrLf & _
  "  that he had difficulty finding other work later."

The vbcrlf stands for "Visual Basic Carriage Return Line Feed" -
it makes the printing move down to the next line.
The underscore character _ must be followed by a blank space.

You can make a web-site appear instead of using a msgbox, like this:

   If X > 600 And X < 4200 And Y > 500 And Y < 1500 Then
      Shell "explorer http://www.startrek.com"
   End If