JavaScript - Карта изображений: Пособие для начинающих

Привет, будущий супергерой кодирования! Сегодня мы отправимся в увлекательное путешествие в мир карт изображений JavaScript. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - я буду вашим доброжелательным гидом, и мы будем двигаться шаг за шагом. К концу этого руководства вы будете создавать интерактивные изображения как профессионал!

Что такое карта изображений?

Прежде чем мы углубимся в часть JavaScript, давайте поймем, что такое карта изображений. Представьте, у вас есть изображение пиццы, и вы хотите, чтобы разные действия происходили при нажатии на разные ингредиенты. Вот exactly что делает карта изображений - она делает определенные области изображения кликабельными!

Начало работы с HTML

Для создания карты изображений мы начинаем с базового HTML. Не волнуйтесь; это проще, чем кажется!

<img src="pizza.jpg" alt="Вкусная пицца" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt="Сыр">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="Перец">
</map>

Давайте разберем это:

• У нас есть тег <img>, который отображает наше изображение пиццы.
• Атрибут usemap connect изображение с нашей картой.
• Внутри тега <map>, мы определяем кликабельные области с помощью тегов <area>.
• Каждый <area> имеет форму (круг или прямоугольник), координаты и ссылку.

Улучшение с помощью JavaScript

Теперь добавим немного магии JavaScript, чтобы сделать нашу карту изображений более интерактивной!

Шаг 1: Выбор элементов

Сначала нам нужно получить наши элементы с помощью JavaScript:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

Этот код находит наше изображение и все кликабельные области, которые мы определили.

Шаг 2: Добавление событий клика

Теперь давайте сделаем что-то, когда мы нажимаем на область:

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('Вы нажали на ' + this.alt);
});
});

Этот код добавляет событие клика к каждой области. При нажатии он показывает всплывающее окно с названием ингредиента.

Шаг 3: Подсветка областей

Давайте сделаем это визуальным! Мы будем подсвечивать область при наведении мыши:

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

Этот код создает полупрозрачное покрытие для каждой области и показывает/скрывает его при наведении/отведении мыши.

Объединение всего

Вот наш полный код на JavaScript:

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('You clicked on ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

Заключение

Поздравляю! Вы только что создали интерактивную карту изображений с помощью JavaScript. Помните, когда я говорил, что вы будете создавать интерактивные изображения как профессионал? Ну и посмотрите на вас!

Вот быстрый обзор того, что мы узнали:

1. Мы начали с базового HTML для определения нашего изображения и кликабельных областей.
2. Мы использовали JavaScript для выбора этих элементов.
3. Мы добавили события клика для отображения всплывающих окон при нажатии на области.
4. Мы создали визуальный отклик с помощью подсветки областей при наведении мыши.

Таблица методов

Вот таблица основных методов JavaScript, которые мы использовали:

Метод	Описание
querySelector()	Выбирает первый элемент, соответствующий CSS-селектору
querySelectorAll()	Выбирает все элементы, соответствующие CSS-селектору
addEventListener()	Прикрепляет обработчик событий к элементу
preventDefault()	Prevents the default action of an event
createElement()	Создает новый HTML-элемент
appendChild()	Добавляет новый дочерний узел к элементу

Продолжайте практиковаться и экспериментировать с этими концепциями. Before you know it, you'll be creating all sorts of interactive web elements. Remember, every expert was once a beginner. Happy coding!

Credits: Image by storyset