Создание динамического многослойного изображения для Интернета

Question

У меня есть многослойное изображение в Photoshop, которое я хотел бы использовать в Интернете.Цель состоит в том, чтобы иметь несколько кнопок для отображения / скрытия различных слоев.

Первоначально я думал экспортировать каждый слой в виде прозрачного GIF PNG, складывать изображения с использованием CSS и использоватьJavascript для переключения видимости каждого слоя.

Есть ли лучший способ добиться этого?Мне особенно интересно слышать о любом программном обеспечении или библиотеках Javascript, которые бы упростили этот процесс.

Большое спасибо.

Редактировать:
Для пояснения, изображение, о котором идет речь, - это карта с различными контурамии затененные области для наложения, поэтому мне понадобится только базовый контроль непрозрачности слоя.

Answer 1

Вы можете попытаться использовать свойства :: before и :: after и -webkit-mask-image, чтобы помочь вам создать многослойное изображение.

Или просто сложите png с абсолютной позицией, и, кстати, ваш png должен быть в 24-битном моде.

Answer 2

Я бы сложил каждый слой в одно большое изображение.В исходном коде создайте рамку размером с слой с вашим сложенным изображением в качестве фона.

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