Bir Sıcak Nokta Öğesi yaratmak

Çoğu web sitesinde bir yada birden fazla sıcak noktası-yeri olan ve bunların tıklanmasıyla bazı işlevleri yerine getiren grafiksel resimler görürsünüz. Bu sıcak noktalar birbirinden ayrı resimlerden ve onların bağlantılarından başka bir şey değildir. Bununla birlikte bazı resimler farenin kendi bölgelerinden geçmesiyle bir hint gösterirler yada tıklandığınızda bir müzik çalarlar. Genellikle web tasarımcıları bu tip etkileri yaratmak için Java programlama dilini kullanırlar.

Bu yazıda,Size şeffaf delphi sıcak nokta öğelerini nasıl yaratacağınızı göstereceğim. Bu öğeyi bir formda bir image yada shape öğesinin istediğiniz bir bölgesinin üzerine yerleştirebilirsiniz;böylece bu nesne bir hint gösterebilir, farenin tıklanması yada sürükle bırak hareketi gibi fare hareketleri ile bazı işlevler yerine getirebilir.

Sıcak Noktadan İstenilen

Başlamadan önce, sıcak nokta öğemizin hangi davranışları sergileyeceğine karar verelim. Öncelikle biz öğemizin şeffaf olmasını istiyoruz. Sonra; eğer visible özelliği false durumda ise arkasında görünen herhangi bir image yada shape'in o bölgesini işlevsizleştirecek bir öğe istiyoruz Ayrıca fare hareketlerine cevap vermek için bir öğe istiyoruz, Fakat bir pencere kontrol öğesi yaratmak istemiyoruz çünkü sistem kaynaklarını çok fazla tüketmektedir. Eğer başka pencereli öğeler içeren formda bazı sıcak noktalar yaratacaksak, bu dikkat edilmesi gereken bir konudur.

Bu gereksinimler,TpaintBox ve TLabel öğe sınıflarında sağlanmıştır. Aslında Paintbox öğesi için OnPaint olay handler'i yaratmazsanız yada caption'suz bir label yaratırsanız ve transparent özelliğini True yaparsanız aynı şeffaf etkiyi yapabilirsiniz. Ne yazık ki bu öğe sınıflarının tümü bizim gerçekten istemediğimiz yada ihtiyacımız olmayan davranışları da gösterir.Bu öğelerin temel sınıfı olan TGraphicControl sınıfını deneyebilirsiniz. Öğemizi geliştirirken ilgilendiğimiz bütün özelliklerinin tanımlarını bulacaksınız. Fakat bunları Property editörde yayınlamaz.Buna göre TGraphicControl'den yeni bir sınıf ile istediğimiz gibi tam bir öğe yaratabiliriz ve yayımlanmamış özellikleri yayımlanmış gibi tekrar tanımlayabiliriz.

Tanımlamalar

Şimdi sıcak nokta öğemizi yaratalım. Önce Component Expert menüsünden THotspot adlı bir nesne yaratalım ve bunu öğe paletinde Birliksoft sayfasına yerleştirelim. Yeni öğe sınıfı için kaynak kod göründüğünde Aşağıda çizgiler ile ayrılmış kodu girin. Eğer bunu Delphi 2.0 ve üstü için kullanacaksanız OnStartDrag özelliğini aktif hale getirin.

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 ve üstü için sadece! }

end;

procedure Register;

implementation

procedure Register;

begin

RegisterComponents('Birliksoft', [THotSpot]);

end;

 end.

Kod girmeyi tamamladığınızda HOTSPOT.PAS olarak kaydedin ve bir öğe kütüphanesinin içine kurun. Ardından boş bir form yaratın ve formun üstüne bir image öğesi yerleştirin. Image öğesine çift tıklayın ve IMAGES\SPLASH\256COLOR dizinindeki SHIPPING.BMP dosyasını yükleyin. HotSpot öğesini biteşlemin sağ alt köşesine yerleştirin ve geminin pruvasını kaplayana kadar genişletin. Sonra Hotspot öğesinin Hint özelliğini Geminin pruvası olarak değiştirin. Ana formun ShowHint özeliğini True yaparak bu hint'i enable yapın. HotSpot öğesinin Cursor özelliğini crUpArrow olarak değiştirin.

En son olarak bir OnClick olay handlerini yaratmak için hotspot öğesinin üzerini çift tıklayın ve aşşağıdaki şekilde değiştirin:

procedure TForm1.HotSpot1Click(Sender: TObject);

begin

ShowMessage('Pruvayı tıkladınız...');

end;

Bu uygulamayı derleyip çalıştırdığınızda,dikkat ederseniz; sıcak nokta bölgesi üzerinde hareket ettiğinde imleç yüzeyi bir yukarı oka dönüşüyor ve Şekil A da görüldüğü gibi hint penceresi görünüyor. Sıcak noktayı tıkladığınızda. Şekil B de görüldüğü gibi bir diyalog kutusu ve bir mesaj görüntüleniyor.

Şekil A: HotSpot öğesi üzerinde imleç değişir ve hint penceresi görüntülenir.

Şekil B: HotSpot öğesinin OnClick olay özelliğini bir resmin verilen bölgelerde hareketleri işlevselleştirmek için kullanabilirsiniz.