Geçmişte birçok geliştirici, bir görüntüyü birden fazla parçaya bölüp ve bu parçaları bir tabloda tam bir görüntü oluşturacak şekilde yeniden biraraya
getiriyordu.Asp.Net ile gelen Image Map kontrolü ile tek bir görüntü alabilir ve koordinatlar kullanarak görüntünün üzerinde özel noktalar belirtebilirsiniz.
Aşağıdaki örnekte bunun bir örneğini görebilirsiniz...
Default.aspx
<body>
<form id="form1" runat="server">
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="kedivekopek.jpg" HotSpotMode="Navigate">
<asp:RectangleHotSpot top ="0" bottom="225" left="0" Right="150" AlternateText="Köpek" NavigateUrl="~/Default.aspx"/>
<asp:RectangleHotSpot Top="0" Bottom="225" Left="150" Right="150" AlternateText="Kedi" NavigateUrl="~/Default.aspx" />
</asp:ImageMap>
</form>
</body>
Ekran çıktısı :
Görüldüğü üzere resimlerde seçim işlemi yapmak Asp.Net ile bu denli basit hale geliyor.
ImageMap kontrolü özel noktaları 3 farklı şekilde tanımlamamızı sağlar.Bunlar;
RectangleHotspot:Dikdörtgen şeklinde özel noktalar için kullanılır.
CircleHotspot:Çember şeklinde özel noktalar için kullanılır.
PolygonHotSpot:Çokgen şeklinde özel noktalar için kullanılır.
Bu yöntemlerle özel noktalarımızı belirledikten sonra kullanıcıya bu noktaları tıklamasına olanak sağlayabiliriz.
HotspotMode özelliği ile de bu tıklamalara nasıl karşılık vereceğimizi belirleyebiliriz.
HotSpotMode niteliği de kendi içinde 3 farklı değer alır.
Bunlar;Postback,Navigate ve InAvtive dir.
Yukarıdaki örnekte Navigate durumu seçilidir.Yani seçilen resmi tıkladığınızda belirli bir sayfaya gittiğini görebilirsiniz.
Bunun dışında Postback özelliği ilede özel bir noktaya tıklandığında,sunucuya geri göndererek o nokta ile ilgilenebilirsiniz.
Böylece basit ama kullanışlı bir kontrolü de öğrenmiş olduk…
Gelecek makalelerde görüşmek üzere….
Yusuf Karakaş
Saygılarımla...
![[KickIt]](http://www.dotnetkicks.com/favicon.ico)
![[Dzone]](http://www.dzone.com/favicon.ico)
![[Digg]](http://www.digg.com/favicon.ico)
![[Reddit]](http://www.reddit.com/favicon.ico)
![[del.icio.us]](http://www.delicious.com/favicon.ico)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://www.technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
Etiketler: image map, seçim İşlemi, resim