HTML de açılan imageye tıklanıldığında 2 textbox’a tıklanılan yerin x ve y image koordinatı elde etmek ve elde edilen koordinatlara bir marker koymak için;
Script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(document).ready(function () { $(ImageMap1).click(function (e) { var mouseX = e.offsetX ? (e.offsetX) : e.pageX - document.getElementById("pointer_div").offsetLeft; var mouseY = e.offsetY ? (e.offsetY) : e.pageY - document.getElementById("pointer_div").offsetTop; document.getElementById("cross").style.left = (mouseX - 19) + 'px'; document.getElementById("cross").style.top = (mouseY - 74) + 'px'; document.getElementById("cross").style.visibility = "visible"; document.getElementById("form_x").value = mouseX; document.getElementById("form_y").value = mouseY; }); }); </script> <style> .mapi{ height:500px; margin: 0; padding: 0; } </style> |
HTML:
1 2 3 4 5 6 7 8 9 |
<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> <img src="/images/point.png" id="cross" style="position: absolute; visibility: hidden; z-index: 2;" /> </div> <hr /> <div style="float: left;"> <input type="text" id="form_x" runat="server" size="4" /> <input type="text" id="form_y" runat="server" size="4" /> </div> |
point.png yüklenilen fotoğrafın üzerinde çıkacak marker’dır.