Как наложить несколько прозрачных png-изображений, чтобы они показывались по отдельности при наведении курсора?
Задача такая.
Есть фотография с несколькими надписями, которые должны подсвечиваться по отдельности, в зависимости от того, куда пользователь наводит курсор.
Соответственно, есть две прориси – надпись 1 и надпись 2. Эти прориси наложены поверх друг друга и до поры не видны – отображается только фотография. Стрелка пересекает надпись 1, и на фотографии проявляется прорись 1. Задеваю вторую – прорись 2.
Идея такая. Наложить две прориси с прозрачным слоем друг на друга поверх фотографии с opacity 0. Когда происходит событие, одно из изображений получает opacity 100. Я хочу понять, как правильно наложить друг на друга изображения, чтобы задевался не весь прозрачный фон вообще, а только та часть, где есть пиксели, и как правильно прописать это событие.
Елизавета, еще вариант - нарисовать области разным цветом на другой картинке, Один цвет - одна область с подсказками. Вставить поверх картинки с такими же правилами на изменение размеров канвас с этой картинкой и opacity:0. Когда кликают на канвас - вычисляет цвет точки клика и показываем нужный слой.
В принципе - вставлять не обязательно, но тогда придется перевычислять координаты пропорционально, что тоже несложно...
Так можно довольно удобно задавать области на картинке.
Здорово, спасибо! Но возникла проблема с масштабированием изображения. Оно либо слишком большое, зато есть карта, либо уменьшается силами CSS и HTML, но тогда слетают координаты
В идеале бы посмотреть демку, а то не оч понятно почему надписи должны быть картинкой
В общем случае я бы просто юзал position: absolute на надписях и менял opacity при наведении. Не понимаю с чем возникла проблема
Простой
