Step-by-Step: Adding Clickable Hotspots to Images Using THotSpotImage
Interactive images make software user interfaces much more engaging. In Delphi and C++Builder development, the THotSpotImage component provides a straightforward way to create interactive maps, floor plans, and diagrams. This guide will walk you through the process of adding clickable hotspots to your images step-by-step. What is THotSpotImage?
THotSpotImage is a specialized visual component found in the Delphi and C++Builder component palette. It extends the standard image component by allowing developers to define specific, invisible shapes (hotspots) over an image. When a user clicks inside these defined shapes, the component triggers specific code execution based on which area was selected. Step 1: Add the Component to Your Form
Before writing code, you need to set up your user interface. Open your Delphi or C++Builder project.
Locate the Component Palette (usually on the right side of the IDE). Search for THotSpotImage. Click and drag the component onto your active VCL Form. With the component selected, go to the Object Inspector.
Find the Picture property and click the ellipsis button (…) to upload your base image (e.g., a world map or a machine blueprint). Step 2: Access the HotSpot Editor
The component includes a built-in visual editor to draw your interactive zones.
Right-click the THotSpotImage component on your form design surface.
Select HotSpot Editor from the context menu (or double-click the component). A new window will appear showing your loaded image. Step 3: Create and Define Hotspots
Inside the editor, you can create multiple shapes that correspond to different areas of your image. Click the Add or New HotSpot button. Select the shape type that best fits your target area:
CRect (Rectangle): Best for buttons, grids, or square icons.
CCircle (Circle): Ideal for pins, dials, or circular radial elements.
CPolygon (Polygon): Perfect for irregular shapes like geographical borders or custom machine parts.
Click and drag on the image to position and resize your shape over the desired area. For polygons, click repeatedly to trace the outline of the shape.
Assign a unique Name or ID to each hotspot in the editor’s property panel. This identifier is crucial for your code later.
Repeat this process for all interactive zones on your image, then click OK to save and close the editor. Step 4: Write the Click Event Logic
Now that your shapes are defined, you need to tell the application what to do when a user clicks them. Select your THotSpotImage component on the form. Navigate to the Events tab in the Object Inspector.
Double-click the OnHotSpotClick event to generate the event handler in your code.
Use a conditional statement or a switch/case block to execute code based on the clicked hotspot’s ID or Name. Here is a simple Delphi example:
procedure TForm1.HotSpotImage1HotSpotClick(Sender: TObject; HotSpot: THotSpot); begin // Check which hotspot was clicked using its ID or Name if HotSpot.Name = ‘NorthAmericaZone’ then begin ShowMessage(‘You clicked on North America!’); end else if HotSpot.Name = ‘EuropeZone’ then begin ShowMessage(‘You clicked on Europe!’); end; end; Use code with caution. Step 5: Test and Refine
Run your application by pressing F9. Move your mouse over the image. You will notice the mouse cursor changes shape when hovering over your predefined hotspots, indicating they are interactive. Click the areas to ensure your event logic triggers correctly.
If you need to make adjustments, simply reopen the HotSpot Editor to move, resize, or delete any shapes.
To help me tailor this guide to your project, could you tell me:
Which IDE version are you using (e.g., Delphi 11, 12, or older)?
Leave a Reply