ImageMap(Resim Haritası), bir Web uygulaması kontrolüdür. ImageMap'in özelliği, oluşturulan uygulamada kullanılan resmin istenilirse bölümlere ayrılması ve her birine bağlantı verilmesidir. Aşağıdaki örnek, Asp.Net ile oluşturulan Web uygulamasında imageMap kontrolünün nasıl eklendiği ve kontrolün özellikleri hakkında bilgi vermektedir.
Asp.Net ile Image Map Kontrolünün Kullanılması
- Visual Studio'da bir Default.aspx sayfası oluşturulur.
- Default.aspx sayfasına Toolbox(Araç Kutusu) menüsünden ImageMap(Resim Haritası) kontrolü <div> </div> etiketleri arasına eklenir.
- Eklenen ImageMap kontrolünün ImageUrl( Resim Yolu) özelliğiyle görüntülenecek ve bölmelere ayrılacak resmin tam yolu ve adı girilir.
- Gösterilecek resim HotSpot denilen yapı kullanılarak bölmelere ayrılıyor. HotSpot'lar ise RectangleHotSpot, CircleHotSpot ve PolygonHotSpot olmak üzere üç çeşittir. HotSpot nesnelerinin ortak olan özelliklerinden HotSpotMode özelliği ile, HotSpot'a tıklandığında, bir yönlendirme işlemi yapılacaksa Navigate; sayfa sunucuda işlendiğinde bir işlem yapılacaksa PostBack değeri veriliyor. HotSpot nesnelerinde bir diğer özellik olan AlternateText özelliği ile, HotSpot nesnelerinin fare imleci ile üzerine gelindiğinde gösterilecek yazı belirtiliyor.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ImageMap</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageMap ID="ImageMap" ImageUrl="~/image/imagemap1.jpg" runat="server">
<asp:CircleHotSpot x="115" y="78" Radius="40" AlternateText="Çember"/>
<asp:RectangleHotSpot Bottom="22" Top="125" Left="230" Right="330"
AlternateText="Dikdörtgen" />
<asp:PolygonHotSpot AlternateText="Çokgen"
Coordinates="145,175,190,130,190,170,190,190,170,210,150,170" />
</asp:ImageMap>
</div>
</form>
</body>
</html>
