Отследить нажатие на конкретное изображение

@knuthamsun · Регистрация: 16.08.2014

Студворк — интернет-сервис помощи студентам

Всем привет! Выводятся изображения из Базы Данных. Например так:

HTML5
1
<a href = "http://www.google.ru" target="_blank"><img id = "2f018a2f0d81827177c583f0339b87f9" src = "banners/healthy.png" width = "468" height = "80"></a>

и так несколько штук. Присвоил каждому свои uniqid. Вопрос: как отследить нажатие ИМЕННО НА КОНКРЕТНОЕ изображение? ...с целью дальнейшей передачи это информации в БД, ну и обработки на местности.

P.S например, сколько раз нажали на картинку А, и сколько на Б => и записывать в БД. Я, как бы, догадываюсь, что дело в jQuery и Ajax, но хотелось бы что-то более конкретное

Всем спасибо

P.P.S лично я додумался аж до этого:

JavaScript
1
2
3
$(document).ready(function(){
    $("#...")
});

.. но что за #id передавать и как его получить в каждом конкретном нажатии.. не знаю(

@BANO · 01.07.2016, 17:59

knuthamsun, у вас по идее все эти картинки лежат в одном контейнере, можете показать весь html?

@knuthamsun · 01.07.2016, 18:00 **[ТС]**

<div>с баннерами вот:

HTML5
1
  <div id = "show_all_banners"><a href = "http://www.google.ru" target="_blank"><img id = "2f018a2f0d81827177c583f0339b87f9" src = "banners/healthy.png" width = "468" height = "80"></a><br /><br /></div><div id = "show_all_banners"><a href = "http://www.google.co.uk" target="_blank"><img id = "d3c77a13f9bccb0fa21264af1917d5e4" src = "banners/goodrich.png" width = "468" height = "80"></a><br /><br /></div><div id = "show_all_banners"><a href = "http://www.google.com.ua" target="_blank"><img id = "6456a66359838c5eddb24b8ebf077dfb" src = "banners/dreams.jpg" width = "468" height = "80"></a><br /><br /></div>

P.S. Да

В одном контейнере

@Raisin Zn · 01.07.2016, 18:06

Как вариант:

HTML5
1
<img id="2f018a2f0d81827177c583f0339b87f9" onClick="xxx(this);" src="banners/healthy.png" width="468" height="80">

JavaScript
1
2
3
function xxx(img) {
    alert(img.id);
};

Подойдет?

@BANO · 01.07.2016, 18:08

knuthamsun,

JavaScript
1
2
3
4
5
$("#show_all_banners > *").click(function(event){
    var id = event.target.tagName.toLowerCase() == "img" ? event.target.id : $("img", event.target).attr("id");
    // теперь мы знаем id на который кликнули
    return false // чтобы не перешло по ссылке
})

Добавлено через 38 секунд
Raisin Zn, inline listeners - зло

@knuthamsun · 01.07.2016, 18:14 **[ТС]**

Смотрите, идея в том, что мне нужно получить id и дальше его передать в базу данных. Как это может выглядеть?
P.S. ща гляну

Добавлено через 4 минуты
BANO, как мне теперь эту переменную id передать в БД для дальнейшей обработки? Например, увеличить счётчик нажатий.

@BANO · 01.07.2016, 18:15

knuthamsun, напишите php обработчик, а передать легко

JavaScript
1
$.post("ListenerURI", {id: id})

@knuthamsun · 01.07.2016, 18:17 **[ТС]**

Спасибо

Дальше буду сам разбираться

@BANO · 01.07.2016, 18:20

Не по теме:

knuthamsun, чтобы форум обработал обращение к человеку нужно в специальный тег его вогнать, вот я написал как

@knuthamsun · 01.07.2016, 18:26 **[ТС]**

BANO, ок, спасибо)

Добавлено через 2 минуты
BANO, я вообще хочу сделать, что-то типа контексной рекламы на сайте. Зарегился, и если нажал => получил денежки. С занесением в БД, конечно же и отслеживанием. Мож чего посоветуете почитать?)

@Raisin Zn · 01.07.2016, 18:30

Не по теме:

BANO:

Сообщение от BANO

Raisin Zn, inline listeners - зло

Это?:

JavaScript
1
onClick="xxx(this);"

Если честно, то самому не нравится, когда смешано HTML JS CSS в одной куче.
Но все же чем плохи эти слушатели?

Добавлено через 3 минуты

Не по теме:

Сообщение от knuthamsun

я вообще хочу сделать, что-то типа контексной рекламы на сайте. Зарегился, и если нажал => получил денежки.

Возможно стоит подумать о защите от "накруток", например с одного IP можно щелкнуть только по одной картинке с id="xxx", а при повторном клике, не защитывать клик.

Ну так для размышления и возможно вы об этом уже подумали...

@knuthamsun · 01.07.2016, 18:32 **[ТС]**

Raisin Zn а вам попадались мож материалы по этой теме? Мож чё посоветуете?

P.S. я все советы приму к сведенью, просто пока я ещё учусь) Уже говносайтики могу делать, и даже с каким-то функционалом...но ещё далеко до идеала

@BANO · 01.07.2016, 18:34

Сообщение от knuthamsun

Зарегился, и если нажал => получил денежки

а вотт приду я такой умный и вместо нажатия сделаю цикл, который будет просто так id посылать на ваш сервер

@knuthamsun · 01.07.2016, 18:36 **[ТС]**

BANO , на данном этапе я хочу добиться того, чтобы это хоть как-то работало. Для придания уверенности самому себе, что я могу) А дальше, конечно, буду разбираться с безопасностью)

@Raisin Zn · 01.07.2016, 18:48

Не по теме:

Сообщение от BANO

а вотт приду я такой умный

Необходимо сделать тест на сообразительность при регистрации, чтобы такие умные не смогли пройти! :)

Сообщение от knuthamsun

а вам попадались мож материалы по этой теме?

Материалов не знаю, думаю, что со временем можно выявить недочеты и исправить их.
Может делать проверку, каким то словом. Например, не просто нажать на ссылку, а просмотреть рекламируемую страницу в течении заданного времени, после чего появится код, который надо ввести в форму и нажать оплатить рекламу.

@BANO · 01.07.2016, 18:50

Не по теме:

Raisin Zn, тест типа
найдите ошибку в этой строке

JavaScript
1
test(grand!)

Предполагаемый ответ: шта, блин?
неправильный ответ:

JavaScript
1
test(grand);

@knuthamsun · 01.07.2016, 18:51 **[ТС]**

Raisin Zn

Может делать проверку, каким то словом. Например, не просто нажать на ссылку, а просмотреть рекламируемую страницу в течении заданного времени, после чего появится код, который надо ввести в форму и нажать оплатить рекламу

Собсно, так и хочу сделать)

@BANO · 01.07.2016, 19:00

Raisin Zn, ага, типа как в играх... посмотрите видео и получите алмазики)

knuthamsun, мне кажется легче капчу сделать

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	01.07.2016, 17:59
	knuthamsun, у вас по идее все эти картинки лежат в одном контейнере, можете показать весь html? 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	01.07.2016, 18:14 [ТС]
	Смотрите, идея в том, что мне нужно получить id и дальше его передать в базу данных. Как это может выглядеть? P.S. ща гляну Добавлено через 4 минуты BANO, как мне теперь эту переменную id передать в БД для дальнейшей обработки? Например, увеличить счётчик нажатий. 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	01.07.2016, 18:17 [ТС]
	Спасибо Дальше буду сам разбираться 0

@BANO
	01.07.2016, 18:20
	Не по теме: knuthamsun, чтобы форум обработал обращение к человеку нужно в специальный тег его вогнать, вот я написал как 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	01.07.2016, 18:26 [ТС]
	BANO, ок, спасибо) Добавлено через 2 минуты BANO, я вообще хочу сделать, что-то типа контексной рекламы на сайте. Зарегился, и если нажал => получил денежки. С занесением в БД, конечно же и отслеживанием. Мож чего посоветуете почитать?) 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	01.07.2016, 18:32 [ТС]
	Raisin Zn а вам попадались мож материалы по этой теме? Мож чё посоветуете? P.S. я все советы приму к сведенью, просто пока я ещё учусь) Уже говносайтики могу делать, и даже с каким-то функционалом...но ещё далеко до идеала 0

@knuthamsun 0 / 0 / 0 Регистрация: 16.08.2014 Сообщений: 78
	01.07.2016, 18:36 [ТС]
	BANO , на данном этапе я хочу добиться того, чтобы это хоть как-то работало. Для придания уверенности самому себе, что я могу) А дальше, конечно, буду разбираться с безопасностью) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	01.07.2016, 19:00
	Raisin Zn, ага, типа как в играх... посмотрите видео и получите алмазики) knuthamsun, мне кажется легче капчу сделать 0