Реагировать: Выберите часть тела из изображения

Question

Я хочу создать веб-сайт с React, на котором вы можете выбрать различные части тела. Я хотел бы спросить ваше мнение, что будет наилучшей возможностью для этого? Как я могу выделить различные части тела и сделать их кликабельными?

Я бы изобразил такой экран, где я могу нажать, например, рука, нога, голова и т.д .:

Спасибо за вашу помощь!

Answer 1

Вам понадобятся два изображения.

1. Оригинальная цветная форма тела (назовем это пассивным состоянием).
2. Активная цветовая форма тела.

Создайте сетку прямоугольников поверх изображения пассивного состояния в соответствии с частями тела, нарежьте изображение активной формы тела и поместите прямоугольники в качестве фоновых изображений и установите размер изображения на 0. При наведении курсора просто установите размер изображения на исходное значение.