If you've spent any time browsing the World Wide Web, you've seen graphic images that contain one or more hot spots--locations that you can click to initiate some action. In many cases, these hot spots are nothing more than separate images with their own links. However, some images will display a hint when the mouse passes over a certain region, or play a sound when you click in that region. Typically, Web developers are using the Java programming language to create this type of effect.
In this article, we'll show how you can create a transparent Delphi hot-spot component. You can place this component over a specific region of an Image or Shape component on a form, so that it displays a hint or initiates some other action in response to mouse movements, clicks, or drag-and-drop actions.
Before we begin, let's consider what behavior we want our hot-spot component to exhibit. First, we want the component to be transparent. After all, if it's visible, it will obscure any image or shape that appears behind it. Second, we want the component to respond to various mouse actions. However, we don't want to create a window control component, because doing so consumes precious system resources, and this could be a significan't issue if we create several hot spots on a form that contains other windowed controls.
Given these requirements, the TPaintBox and TLabel component classes seem like natural places to start. In fact, if you don't create an OnPaint event handler for a PaintBox component, or if you create a Label component without a caption and set the Transparent property to True, you can achieve the desired transparent effect.
Unfortunately, both of these component classes define behavior that we really don't need or want. However, you examine the TGraphicControl base class for these components, you'll find that it defines all the properties we're interested in providing, but it doesn't publish them. Accordingly, we can create the exact component we want by deriving a new class from TGraphicControl and then simply redeclaring the non-published properties as published.
Now let's create our new HotSpot component and put it through its paces. To begin, use the Component Expert to generate a new component named THotSpot, derive it from the TGraphicControl class, and place it on the DelphiJournal page of the Component Palette. When the source file for the new component class appears, enter the appropriate code from Listing A. (We've highlighted in green the code you'll need to enter.) By the way, if you're going to install this component under Delphi 2.0, you can enable the last property, OnStartDrag.
Listing A: HOTSPOT.PAS
unit Hotspot;
interface
uses
SysUtils, WinTypes, WinProcs, Messages,
Classes, Graphics, Controls, Forms, Dialogs;
type
THotSpot = class(TGraphicControl)
private
{ Private declarations }
protected
{ Protected declarations }
public
{ Public declarations }
published
{ Published declarations }
property Align;
property ShowHint;
property Visible;
property Enabled;
property OnClick;
property OnDblClick;
property OnMouseDown;
property OnMouseUp;
property OnMouseMove;
property OnDragDrop;
property OnEndDrag;
{property OnStartDrag; //Delphi 2.0 Only! }
end;
procedure Register;
implementation
procedure Register;
begin
RegisterComponents('DelphiJournal',
[THotSpot]);
end;
end.
When you've finished entering this code, save the file as HOTSPOT.PAS and then install it into the component library. Then, create a new blank-form project and place an Image component on the main form.
Double-click on the Image component, and load the SHIPPING.BMP image from the IMAGES\SPLASH\256COLOR directory. When the bitmap appears in the Image component, place a HotSpot component over the lower-right corner of the bitmap, and resize it to cover the bow of the ship.
Next, change the HotSpot component's Hint property to The Bow of the Ship, and enable this hint by setting the main form's ShowHint property to True. To alert the user that there's something special about this region of the image, change the HotSpot component's Cursor property to crUpArrow.
Finally, double-click on the HotSpot component to create an OnClick event handler, and modify the body of the method to
procedure TForm1.HotSpot1Click(Sender: TObject);
begin
ShowMessage('You clicked on the bow.');
end;
When you build and run this application, notice that moving the mouse cursor over the hot spot region causes the cursor shape to change to an up arrow (+) and the hint window to appear, as shown in Figure A. Now, click on the hot spot. Doing so displays the dialog box and a message, as shown in Figure B.
Figure A: The cursor will change and the hint window will appear as soon as you position the mouse over the HotSpot component.
Figure B: You can use the HotSpot component's
OnClick event property to trigger actions that are appropriate for a given
region of an image
