Можете ли вы накладывать изображения друг на друга на веб-странице?

Я хочу создать веб-сайт, который будет "одеваться", где вы можете щелкнуть по различным аксессуарам, и они будут накладываться друг на друга.

Поскольку это немного сложно описать, я нашел эти примеры, которые, надеюсь, будут выделять то, что я пытаюсь сделать:

У меня есть сотни различных аксессуаров в качестве изображений прямо сейчас, и (подобно игре выше) мне нужно поддерживать возможность выбора более одного. Поэтому мне нужно решение, которое не требует предварительного сохранения изображения каждого проникновения дополнительных комбинаций поверх принцессы (так как это будут миллионы предопределенных изображений).

В идеале я хотел бы использовать Javascript/jQuery или CSS-решение, но будет принимать любые предложения, которые есть у людей. Предложения Flash также будут полезны.

Итак, мои вопросы:

  • Как приведенный выше примерный сайт выравнивает все изображения друг над другом? Кажется, я не могу найти код CSS или Javascript, который это делает?
  • Есть ли какие-либо предложения по созданию этого типа веб-сайта (ссылки, учебники или примеры кода были бы замечательными)?

Ответ 1

Короткий ответ - да.

Есть много способов справиться с этим. С HTML/CSS вы можете легко перемещать элементы друг на друга.

HTML:

<img id="imga" src="img1.png"/>
<img id="imgb" src="img2.png"/>
<img id="imgc" src="img3.png"/>

CSS:

img
{
    position:absolute;
    top: 0px;
    left: 0px;
}

Итак, давайте посмотрим, что здесь важно. У вас есть 3 изображения в вашем документе HTML (imga, imgb и imgc). Чтобы наложить их, вы должны сначала установить позицию на абсолютную, чтобы изображения игнорировали любые поведения макета по умолчанию. Затем вы можете использовать свойство left и top, чтобы определить координаты x, y элементов img соответственно. В приведенном выше примере все элементы накладываются в верхнем левом углу страницы. Чтобы контролировать, какое изображение заканчивается сверху, вы можете использовать свойство z-index, например:

#imga
{
z-index: 10;
}

#imgb
{
z-index: 20;
}

#imgc
{
z-index: 30;
}

Это приведет к тому, что imgc появится впереди, imgb появится за imgc и imga за всем остальным. Свойство z-index присваивает этот элемент перед другим. Элемент с наибольшим z-index идет сверху, затем второй по величине и т.д.

Для вашего проекта мы можем немного настроить код выше:

HTML

<img id="layer1" src="img1.png"/>
<img id="layer2" src="img2.png"/>
<img id="layer3" src="img3.png"/>

CSS

img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
   z-index: 10;
}
#layer2
{
z-index: 20;
}

#layer3
{
z-index: 30;
}

Поскольку вы теперь понимаете, что лежит там, вы знаете, что layer3 находится сверху (слой аксессуаров), layer2 находится посередине (ваш человек). и layer1 находится внизу (фон). Затем вы можете создавать такие аксессуары:

<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>

И затем, используя javascript, вы можете установить первый уровень src равным щелкнутому аксессуару.

function setAccessory(path){
     document.getElementById('layer1').src = path;
     //if you're using jQuery, $("#layer1").attr("src", path);
}

Вы можете создать столько аксессуаров, сколько хотите. Скажем, вы хотите добавить больше аксессуаров поверх своего лица, тогда вы можете легко создать больше слоев, назначить их z-индексы (и даже делать это динамически с помощью javascript, как интересно!)

В заключение, надеюсь, вы нашли этот небольшой учебник полезным. Для ваших целей я предлагаю взглянуть на jQuery, а также на элемент. Они будут интересны в использовании и, безусловно, помогут вашему приложению.

Удача с вашим приложением.

Ответ 2

Вам нужно будет использовать комбинацию позиции: абсолютная с заданными верхними и левыми позициями, а также z-индексы для управления тем, какие элементы отображаются сверху.

Ответ 3

Если вы ищете решение, требующее меньше кода, попробуйте следующее:

  • Создайте свое искусство в Photoshop, с каждым аксессуаром на другом слое
  • Сохраните каждый слой как отдельное изображение. Убедитесь, что все изображения имеют полный размер холста и используют прозрачность. Сохранить как PNG-24. Таким образом, положение каждого аксессуара будет "жестко закодировано" в изображениях, поэтому вам не придется обрабатывать его в коде.
  • Создайте контейнер <div> и дайте ему position: relative;.
  • Поместите все изображения внутри <div>, как теги <img>, в правильном порядке (соедините слои, причем фоновое изображение будет первым)
  • Примените position: absolute; к каждому <img>.

Это должно помочь вам начать. Затем используйте jQuery для переключения каждого изображения при нажатии на кнопки, представляющие их.

Ответ 4

Я бы рассмотрел использование тега <canvas> и API.

Это позволяет вам абсолютно позиционировать элементы и изображения, а также, если вы используете новый браузер, вы получите преимущество аппаратного ускорения, которое ускорит все.

Для обратной совместимости в IE вам нужно будет использовать плагин javascript Google Explorer Canvas.

Ответ 5

Используя анимацию jQuery, вы можете создавать "перетаскиваемые" изображения. Дайте вашим изображениям событие onmousedown, которое запускает функцию, которая перемещает ваше изображение по горизонтали X и Y вертикальным пикселям в зависимости от текущего местоположения мыши. Ознакомьтесь с этой ссылкой, чтобы узнать, как найти местоположение мыши с помощью jQuery. http://docs.jquery.com/Tutorials:Mouse_Position

Или, что еще лучше, получить плагин jQuery UI "droppable", который позволяет легко передавать функции перетаскивания любому элементу. http://jqueryui.com/demos/droppable/

Ответ 6

CSS3 поддерживает несколько фоновых слоев

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Ответ 7

Используя комбинацию свойств css, вы можете добиться того, что вам нужно.

Чтобы расположить аксессуары в правильном месте, вы можете установить абсолютное положение и использовать абсолютные координаты, чтобы указать их положение.

Чтобы установить порядок отображения, вы можете использовать свойство z-index для их "стекания".

Отъезд:

http://www.html.net/tutorials/css/lesson15.php

Для получения подробной информации об этом.