PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

style => position

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Описание: Запутался окончательно

Поиск в теме | Версия для печати

Dragon_Knight	Отправлено: 21 Мая, 2013 - 03:59:10
Гость Покинул форум Сообщений всего: 103 Дата рег-ции: Май 2012 Откуда: г.Мытищи, МО Помог: 0 раз(а)	Здравсвуйте. На этот раз не могу разобраться с параметрами позиционирования и считывания координат относительно этого позиционирования. Сразу показываю что я смог сделать: http://globalzone[dot]su/test/gereratecoords[dot]html Задача стоит такая: Есть картинки, любого размера. Нужно кликая на картинку, узнавать координаты клика относительно самой картинки, заносить эти координаты в поле, и в точке клика ставить отметку (красная точка). Без точки, всё работает нормально, но как пытаюсь добавить отметку клика, всё уезжает и я никак не могу разобраться как нужно сделать. Пожалуйста помогите, а то уже всю голову сломал (Отредактировано автором: 21 Мая, 2013 - 04:01:38)

armancho7777777	Отправлено: 21 Мая, 2013 - 04:34:43
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	css Спойлер (Отобразить) CODE (css): скопировать код в буфер обмена #conteiner { position:relative; width:1024px; height:1000px; } #conteiner img { position:absolute; top:0; left:0; z-index:1; } #points_layer { position:absolute; top:0; left:0; z-index:2; width:1024px; height:1000px; border:1px solid #000; } html Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <div id="conteiner"> <div id="points_layer" onclick="defPosition(event);"></div> <img src="http://globalzone.su/test/qwerty.jpg" id="image"> </div> Отмечено точек: <div id="coords_count" style="display: inline-block;">0</div><br> <textarea id="coords" name="coords" rows="10" cols="150"></textarea> js Спойлер (Отобразить) CODE (javascript): скопировать код в буфер обмена var counts = 0; var lastX, lastY; function defPosition(event) { var x = y = 0; var event = event \|\| window.event, conteiner = document.getElementById('conteiner'), points_layer = document.getElementById("points_layer"); // Получаем координаты клика по странице, то есть абсолютные координаты клика. if(document.attachEvent != null) // Internet Explorer & Opera { x = (window.event.clientX - conteiner.offsetLeft) + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); y = (window.event.clientY - conteiner.offsetTop) + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else if(!document.attachEvent && document.addEventListener) // Gecko { x = (event.clientX - conteiner.offsetLeft) + window.scrollX; y = (event.clientY - conteiner.offsetTop) + window.scrollY; } //Определяем границы объекта, в нашем случае картинки. y0=document.getElementById("image").offsetTop; x0=document.getElementById("image").offsetLeft; // Пересчитываем координаты. x = x-x0; y = y-y0; //alert(x + "\|" + y); //alert(x0 + "\|" + y0); if(lastX != x && lastY != y) { // Выводим координаты в поле, отмечаем точку клика и считаем кол-во точек. counts++; var coords = document.getElementById("coords"); coords.value += "" + x + "," + y + ", "; coords.scrollTop = coords.scrollHeight - coords.clientHeight; points_layer.innerHTML += "<span id=\"point_" + counts + "\" style=\"position:absolute; left:" + (x-5) + "px; top:" + (y-5) + "px;\"><img src=\"http://globalzone.su/test/point.png\"></span>"; document.getElementById("coords_count").innerHTML = counts; lastX = x; lastY = y; } } Пример

Dragon_Knight	Отправлено: 21 Мая, 2013 - 04:44:13
Гость Покинул форум Сообщений всего: 103 Дата рег-ции: Май 2012 Откуда: г.Мытищи, МО Помог: 0 раз(а)	armancho7777777, Спасибо огромное Тока один вопросик относительно css: Смущают параметры: width:1024px; height:1000px; Как я понимаю, если картинка будет больше, нада будет числа увеличивать?

armancho7777777	Отправлено: 21 Мая, 2013 - 04:52:08
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	Dragon_Knight пишет: Смущают параметры: width:1024px; height:1000px; CODE (css): скопировать код в буфер обмена #conteiner-wrapp { text-align:center; } #conteiner { position:relative; display:inline-block; vertical-align:top; display:inline; / IE <= 7 / zoom:1; / IE <= 7 / } #points_layer { position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; border:1px solid #000; } CODE (html): скопировать код в буфер обмена <div id="conteiner-wrapp"> <div id="conteiner"> <div id="points_layer" onclick="defPosition(event);"></div> <img src="http://globalzone.su/test/qwerty.jpg" id="image"> </div> </div> Пример*

Dragon_Knight	Отправлено: 21 Мая, 2013 - 05:09:53
Гость Покинул форум Сообщений всего: 103 Дата рег-ции: Май 2012 Откуда: г.Мытищи, МО Помог: 0 раз(а)	armancho7777777, супер, огромное спасибо!!! Если не затруднит, ещё один вопросик возник: Получается от этого можно избавляться, потому как всегда будет по нулям? CODE (htmlphp): скопировать код в буфер обмена y0=document.getElementById("image").offsetTop; x0=document.getElementById("image").offsetLeft;

armancho7777777	Отправлено: 21 Мая, 2013 - 08:20:10
Активный участник Покинул форум Сообщений всего: 4526 Дата рег-ции: Февр. 2011 Откуда: Москва Помог: 221 раз(а)	Да.

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.