Как наложить несколько прозрачных png-изображений, чтобы они показывались по отдельности при наведении курсора?
Задача такая.
Есть фотография с несколькими надписями, которые должны подсвечиваться по отдельности, в зависимости от того, куда пользователь наводит курсор.
Соответственно, есть две прориси – надпись 1 и надпись 2. Эти прориси наложены поверх друг друга и до поры не видны – отображается только фотография. Стрелка пересекает надпись 1, и на фотографии проявляется прорись 1. Задеваю вторую – прорись 2.
Идея такая. Наложить две прориси с прозрачным слоем друг на друга поверх фотографии с opacity 0. Когда происходит событие, одно из изображений получает opacity 100. Я хочу понять, как правильно наложить друг на друга изображения, чтобы задевался не весь прозрачный фон вообще, а только та часть, где есть пиксели, и как правильно прописать это событие.
Изображение помещено в таблицу (table).
Дополнительно:
Демка бы не помешала.
Но, предварительно - просто на css с png картинкам шансов нет.
А вот на canvas если переносить, то вполне должно быть ок.
https://developer.mozilla.org/en-US/docs/Web/HTML/...
В принципе - вставлять не обязательно, но тогда придется перевычислять координаты пропорционально, что тоже несложно...
Так можно довольно удобно задавать области на картинке.
Ответы:
Попробуйте это
https://matemarschalko.medium.com/interactive-imag...
- Здорово, спасибо! Но возникла проблема с масштабированием изображения. Оно либо слишком большое, зато есть карта, либо уменьшается силами CSS и HTML, но тогда слетают координаты
- Елизавета, SVG хорошо скалируется, этот метод больше на фикс, но можно через Js масштабировать
В идеале бы посмотреть демку, а то не оч понятно почему надписи должны быть картинкой
В общем случае я бы просто юзал position: absolute на надписях и менял opacity при наведении. Не понимаю с чем возникла проблема
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы наложить несколько прозрачных PNG-изображений так, чтобы они показывались по отдельности при наведении курсора, вам потребуется использовать CSS и HTML. Вот пример кода, который поможет вам реализовать данную функциональность:
HTML:
<div class="container"> <img src="image1.png" class="image" id="image1"> <img src="image2.png" class="image" id="image2"> </div><div class="container"> <img src="image1.png" class="image" id="image1"> <img src="image2.png" class="image" id="image2"> </div>
CSS:
.container { position: relative; } .image { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s; } .image:hover { opacity: 1; }
В данном примере у нас есть контейнер с двумя изображениями (image1.png и image2.png), которые находятся друг над другом благодаря свойству `position: absolute;`. Изначально у изображений установлена нулевая прозрачность (`opacity: 0;`). При наведении курсора на изображение, устанавливается полная прозрачность (`opacity: 1;`), что позволяет видеть только это изображение.
Таким образом, при наведении курсора на каждое изображение, оно будет показываться полностью, а остальные будут скрыты. Этот подход позволяет создать эффект переключения между изображениями при наведении курсора.