Событие onclick у области изображения

Энтомолог · Регистрация: 25.04.2012

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

Что для этого нужно использовать?

quwy · 15.10.2014, 15:36

Событие всегда общее, а вот координаты клика всегда можно узнать и сопоставить с необходимой областью изображения:

JavaScript
1
2
3
4
function OnClick(event)
{
  alert(event.clientX+'x'+event.clientY);
}

@Lazy_Den · 15.10.2014, 15:37

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

у области изображения

Не совсем ясно. Имеется в виду, что нужно обрабатывать клик на родительском элементе изображения? Тогда можно так

JavaScript
1
2
3
4
5
6
7
document.getElementById('img_area').addEventListener('click', function(e){
    if(e.target == this){
        console.log('Клик на области вокруг изображения');
    } else {
        console.log('Клик на самом изображении');
    }
}, false);

Энтомолог · 15.10.2014, 18:55 **[ТС]**

Я имел в виду событие клика в прямоугольной области некоторого большего изображения, заданного тегом img. Нужен ли тут тег map?

@newJS · 15.10.2014, 21:22

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

Нужен ли тут тег map?

Карта нужна чтобы на одной картинке выделить несколько независимых областей которые каждая себе будет кликабельна.
А если нужен клик по всей картинке, то просто onclick в тег img.

Новые блоги и статьи Все статьи Все блоги /
Введение в Q# - язык квантовых вычислений от Microsoft EggHead 19.05.2025 Microsoft вошла в гонку технологических гигантов с собственным языком программирования Q#, специально созданным для разработки квантовых алгоритмов. Но прежде чем погружаться в синтаксические дебри. . .	Безопасность Kubernetes с Falco и обнаружение вторжений Mr. Docker 18.05.2025 Переход организаций к микросервисной архитектуре и контейнерным технологиям сопровождается лавинообразным ростом векторов атак — от тривиальных попыток взлома до многоступенчатых кибератак, способных. . .	Аугментация изображений с Python AI_Generated 18.05.2025 Собрать достаточно большой датасет для обучения нейронной сети — та ещё головная боль. Часами вручную размечать картинки, скармливать их ненасытным алгоритмам и молиться, чтобы модель не сдулась при. . .	Исключения в Java: советы, примеры кода и многое другое Javaican 18.05.2025 Исключения — это объекты, созданные когда программа сталкивается с непредвиденной ситуацией: файл не найден, сетевое соединение разорвано, деление на ноль. . . Список можно продолжать до бесконечности. . . .	Как сделать SSO (Single Sign-On) в C# приложении stackOverflow 18.05.2025 SSO — это механизм, позволяющий пользователю пройти аутентификацию один раз и получить доступ к нескольким приложениям без повторного ввода учетных данных. Вы наверняка сталкивались с ним, когда. . .
Kubernetes с Apache Flink для обработки данных в реальном времени Mr. Docker 17.05.2025 Kubernetes — это целая философия управления распределёнными приложениями. В отличие от "примитивных" решений вроде Docker Swarm, K8s (как его ласково называют в тусовке DevOps-инженеров) предлагает. . .	Использование декораторов в Python py-thonny 17.05.2025 Если вы когда-нибудь задумывались о том, как красиво расширить функциональность кода без лишней возни и дублирования, декораторы в Python — та самая волшебная палочка, которую вы искали. По сути, это. . .	Реализация многопоточных сетевых серверов на Python py-thonny 16.05.2025 Когда сталкиваешься с необходимостью писать высоконагруженные сетевые сервисы, выбор технологии имеет критическое значение. Python, со своей элегантностью и высоким уровнем абстракции, может. . .	C# и IoT: разработка Edge приложений с .NET и Azure IoT UnmanagedCoder 16.05.2025 Мир меняется прямо на наших глазах, и интернет вещей (IoT) — один из главных катализаторов этих перемен. Если всего десять лет назад концепция "умных" устройств вызывала скептические улыбки, то. . .	Гибридные квантово-классические вычисления: Примеры оптимизации EggHead 16.05.2025 Гибридные квантово-классические вычисления — это настоящий прорыв в подходах к решению сложнейших вычислительных задач. Представьте себе союз двух разных миров: классические компьютеры, с их. . .

Энтомолог 141 / 182 / 44 Регистрация: 25.04.2012 Сообщений: 2,623 Записей в блоге: 5

	Событие onclick у области изображения 15.10.2014, 15:26. Показов 1689. Ответов 4 Метки нет (Все метки) Что для этого нужно использовать? 0

Энтомолог 141 / 182 / 44 Регистрация: 25.04.2012 Сообщений: 2,623 Записей в блоге: 5
	15.10.2014, 18:55 [ТС]
	Я имел в виду событие клика в прямоугольной области некоторого большего изображения, заданного тегом img. Нужен ли тут тег map? 0

Опции темы