Veritabanından gelen konum, renk ve büyüklük bilgileri doğrultusunda, sayfa açıldığında resim üzerine Dinamik Image Map CircleHotSpot’lar oluşturmak için;
Sayfa başı Script:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(function () { $('.mapi').maphilight( { strokeColor: '808080', strokeWidth: 0, fillColor: 'ffffff', fillOpacity: 1, alwaysOn: true }); }); </script> |
aspx:
1 2 3 |
<div id="pointer_div"> <asp:ImageMap ID="ImageMap1" ImageUrl="~/map.png" runat="server" CssClass="mapi" OnClick="ImageMap1_Click" HotSpotMode="PostBack" BackColor="Fuchsia" ForeColor="Red"></asp:ImageMap> </div> |
Sayfa Sonu Script:
//backend’den areaların alt özelliğine renk kodu (#ffffff) gönderildi. Eğer renk kodu varsa split edilerek baştaki ‘#’ atılacak ve kalan renk kodu o areanın içini dolduran renk olacak. Eğer renk kodu yoksa default olarak yazılan sayfa başı scriptteki renk kalacak.
1 2 3 4 5 6 7 |
$('area').each(function () { if ($(this).attr('alt').toString().length==7) { var renk = $(this).attr('alt'); renk = renk.split('#'); $(this).attr('data-maphilight', '{"stroke":0, "fillColor":"'+renk[1]+'", "alwaysOn":true}'); } }); |
aspx.cs dosyasında PageLoad fonksiyonu, IsPostBack olmadığında çalışacak kod dizini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
DataTable konumluTanklar = new DataTable(); konumluTanklar = DataTableCek("select Adi,KonumX,KonumY,Renk,Tonaj from Tanklar left join ..... KonumX is Not NULL AND KonumY is Not NULL order by Adi", "ConnStr"); //Konumu olan tankların Konum, Renk ve tonaj bilgilerini veritabanından DataTable olarak çektik int x = konumluTanklar.Rows.Count; for (int i = 0; i < x; i++) { CircleHotSpot hotSpot = new CircleHotSpot(); hotSpot.PostBackValue = konumluTanklar.Rows[i]["Adi"].ToString(); hotSpot.X = Convert.ToInt32(konumluTanklar.Rows[i]["KonumX"]); hotSpot.Y = Convert.ToInt32(konumluTanklar.Rows[i]["KonumY"]); //hotspot'ların AlternateTextlerine renk bilgisini yükledimki sayfa sonu javascriptte o bilgilere göre renk atacanak hotSpot.AlternateText = konumluTanklar.Rows[i]["Renk"].ToString(); //Tonaj değerine göe hotSpot'un çapı ayarlanacak. string a = konumluTanklar.Rows[i]["Tonaj"].ToString(); switch (a) { case "1500,00": hotSpot.Radius = 10; break; ... ... ... default: break; } ImageMap1.HotSpots.Add(hotSpot); |