Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery - добавление отметок на картинку / 2 сообщений из 2, страница 1 из 1
27.07.2013, 21:23
    #38346460
yardie
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery - добавление отметок на картинку
Здравствуйте, хочу сделать так чтобы на <img> myImg ставилась отметка. Данный код работает только на <div>
Заранее благодарствую!

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
$(document).bind('click', function () {
        $('#myImg').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset();
            var x = ev.clientX - offset.left;
            var y = ev.clientY - offset.top;
			
            var img = $('<img>');
            img.css('top', y);
            img.css('left', x);
            img.attr('src', 'http://img34.imageshack.us/img34/3337/imglp.png');
            img.appendTo('#myImg');
            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });



сама картинка
Код: html
1.
2.
3.
<div style="padding-left:150px" >
<img src="MyHouse.jpg" id='myImg' alt="Идёт загрузка" >
</div>
...
Рейтинг: 0 / 0
27.07.2013, 21:37
    #38346465
yardie
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery - добавление отметок на картинку
Хмм, вроде разобрался, добавил CSS? но почему-то первый клик на картинке всегда пустой, и скрипт бежит по все картинкам, как это можно поправить?

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<script type="text/javascript">
    $(document).bind('click', function () {
        $('#myImg').bind('click', function (e) {
            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', 'http://img34.imageshack.us/img34/3337/imglp.png');
            img.appendTo('#container');
            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });
</script>



Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
  <style>
#container {
    background: green;
    width: 1000px;
    height: 500px;
    position: relative;
}
#container img {
    position: absolute;   
}
</style>



Код: html
1.
2.
3.
<div id="container">
<img src="MyHouse.jpg" id='myImg' alt="Идёт загрузка" >
</div>
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery - добавление отметок на картинку / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]