|
Определить координаты по клику на изображении X и Y и установка маркера
#38745933
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
Участник
Откуда: Кокосовые острова
Сообщения: 328
|
|
Привет всем!
Задумка такова: В один из DIV я подгружаю изображение из базы. На этом изображении я хочу ставить маркеры по клику. То есть кликая по картинке, JavaScript определяет координаты мыши относительно этого изображения и ставит туда маркер и потом все сохраняется в БД, чтобы при последующей выгрузке этого изображения выгрузить на него, на тоже самое место это маркер.
При таком раскладе все работает как нужно:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
$(document).ready(function () {
$("img[alt='mainphoto']").on('click', function (e) {
e.preventDefault();
var $img = $(e.target);
var offset = $img.offset();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
var img = $('<img>');
img.css('top', y);
img.css('left', x);
img.attr('src', '/Images/Greentag.png');
img.appendTo('#container');
$("#hidX").val(x);
$("#hidY").val(y);
alert('clicked at x: ' + x + ', y: ' + y);
});
});
1.
2.
3.
4.
5.
6.
7.
8.
<style>
#container {
background: green;
position: relative;
}
#container img {
position: absolute;
}
1.
2.
3.
<div id="container">
<img id="@Model[0].Id" src="@Model[0].Path/@Model[0].Folder/@Model[0].OriginalName" alt="mainphoto" class="img-thumbnail" style="cursor: crosshair; border: none; border-radius: 0px; padding: 0px;" />
</div>
Но только стоит мне весь этот код переместить в разметку bootstrap 3.1.1. , как метки начинаю слетать. Позиция мыши относительно изображения - определяется в корне не правильно, идут минусовые значения, маркер улетает за пределы изображения.
при вставке в разметку bootstrap 3.1.1. меняю css стиль на вот этот:
1.
2.
3.
4.
5.
6.
7.
#container {
background: green;
position: relative;
}
#container img {
position: relative;
}
Вот весь код страницы:
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.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
<script type="text/javascript">
$(document).ready(function () {
$("img[alt='mainphoto']").on('click', function (e) {
e.preventDefault();
var $img = $(e.target);
var offset = $img.offset();
var x = e.clientX - offset.left;
var y = e.clientY - offset.top;
var img = $('<img>');
img.css('top', y);
img.css('left', x);
img.attr('src', '/Images/Greentag.png');
img.appendTo('#container');
$("#hidX").val(x);
$("#hidY").val(y);
alert('clicked at x: ' + x + ', y: ' + y);
});
});
</script>
<style>
#container {
background: green;
/*width: auto;
height: 100%;*/
position: relative;
}
#container img {
position: relative;
}
</style>
<div class="row">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10" style="padding-left:3px; padding-right: 3px;">
<div class="col-lg-8 col-md-10 col-xs-12 col-sm-12" style="padding-left: 0px; padding-right: 0px;">
<div style="padding-bottom: 10px;">
<div style="font-size: 15px; color: white; background-color: #222222;" class="text-center">Редактирование Мой шоппинг look</div>
</div>
@using (Html.BeginForm("ShoppingInEditTextInfo", "Shopping", FormMethod.Post, new { id = "ShoppingInEditTextInfo", area = "MyShopping", enctype = "multipart/form-data" }))
{
<table style="line-height: 2.2; width: 100%;">
<tr>
<td style="width: 150px">
<label style="float: left; padding-top: 5px;">Название шопинга: </label>
</td>
</tr>
<tr>
<td>@Html.TextBox("name", (string)ViewBag.ShoppingData.Name, new { @class = "form-control", @style = "float:left;text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden;" })</td>
</tr>
<tr>
<td style="width: 150px">
<label style="float: left; padding-top: 5px;">Страна: </label>
</td>
</tr>
<tr>
<td>
@Html.TextBox("Country", (string)ViewBag.Country, new { @class = "form-control cCountriesProfile", @style = "float:left;" })
@Html.Hidden("selectedIdCountryhiddenProfile", (int)ViewBag.CountryID)
</td>
</tr>
<tr>
<td style="width: 150px">
<label style="float: left; padding-top: 5px;">Город: </label>
</td>
</tr>
<tr>
<td>
@Html.TextBox("City", (string)ViewBag.City, new { @class = "form-control cCitiesProfile", @style = "float:left;" })
@Html.Hidden("selectedIdCityhiddenProfile", (int)ViewBag.CityID)
</td>
</tr>
</table>
@Html.Hidden("IdShopping", (int)ViewBag.ShoppingData.Id)
<button type="submit" class="btn btn-primary" style="width:50px;">Ok</button>
}
</div>
</div>
</div>
<div class="row">
<div class=" col-lg-1 col-md-1 "></div>
<div class="col-lg-10 col-md-10" style="padding-left:3px; padding-right: 3px;">
<div class="col-lg-8 col-md-10 col-xs-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div style="margin-bottom: 10px;">
<div style="font-size: 15px; color: white; background-color: #222222;" class="text-center">Нажмите в любое место на фотографии чтобы описать в чем вы одеты</div>
</div>
@if (Model.Count > 0)
{
for (int i = 0; i < 1; i++)
{
using (Html.BeginForm("DelPhoto", "Shopping", FormMethod.Post))
{ @Html.Hidden("hidIdPhoto", @Model[0].PhotoId)
<input id="btnDelPhoto" type="submit" value="Удалить" />
<div id="container">
<img id="@Model[0].Id" src="@Model[0].Path/@Model[0].Folder/@Model[0].OriginalName" alt="mainphoto" class="img-thumbnail" style="cursor: crosshair; border: none; border-radius: 0px; padding: 0px;" />
</div>
}
}
}
<p></p>
</div>
</div>
</div>
<div class="row" style="position:static;">
<div class="col-lg-1 col-md-1 "></div>
<div class="col-lg-10 col-md-10" style="padding-left:3px; padding-right: 3px;">
<div class="col-lg-8 col-md-10 col-xs-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div style="padding-bottom: 10px;">
<div style="font-size: 15px;"><b>Мой шоппинг:</b></div>
</div>
<ol style="list-style-type: decimal; margin-left: -15px;">
<li style="color: #404040; font-size: 12pt; line-height: 1.5; "><b>Брюки Zara</b>, 3000 руб., магазин Отто, ул. Ленина.</li>
<li style="color: #404040; font-size: 12pt; line-height: 1.5; "><b>Желет D&G</b>, 7000 руб., магазин Мотто, ул. Сталина.</li>
<li style="color: #404040; font-size: 12pt; line-height: 1.5; "><b>Джинсы Calvin Klein</b>, 5000 руб., магазин РОтто, ул. Ельцина.</li>
<li style="color: #404040; font-size: 12pt; line-height: 1.5; "><b>Туфли Lacoste</b>, 12000 руб., магазин ОтЛито, ул. Ленина.</li>
<li style="color: #404040; font-size: 12pt; line-height: 1.5; "><b>Рубашка Zara</b>, 4000 руб., магазин ОтМото, ул. Путина.</li>
</ol>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-1 col-md-1 "></div>
<div class="col-lg-10 col-md-10" style="padding-left:3px; padding-right: 3px;">
<div class="col-lg-8 col-md-10 col-xs-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
<div style="padding-bottom: 10px;">
<div style="font-size: 15px; color: white; background-color: #222222;" class="text-center">Дополнительные фотографии</div>
</div>
@for (int i = 1; i < Model.Count; i++)
{
using (Html.BeginForm("DelPhoto", "Shopping", FormMethod.Post))
{ @Html.Hidden("hidIdPhoto", @Model[i].PhotoId)
<input id="btnDelPhoto" type="submit" value="Удалить" />
<img id="@Model[i].Id" src="@Model[i].Path/@Model[i].Folder/@Model[i].OriginalName" alt="Загрузка изображения" class="img-thumbnail" style="border: none; border-radius: 0px; padding: 5px 0 5px 0;" />
}
}
</div>
</div>
</div>
|
|
|
