2010-10-22 2 views
0

Простой вопрос, действительно. У меня просто нет знаний, чтобы сделать это с помощью JavaScript, а также убедиться, что он работает с (почти) всеми браузерами ...
Я собираюсь создать набор изображений человека, указывающего одной рукой несколькими направления. (Вверх, вниз, влево, вправо, по диагонали и т. Д.) В принципе, эта кукла будет указывать на местоположение мыши. Для этого я хочу использовать анимированный GIF-файл для размещения всех изображений, а затем использовать JavaScript для приведения правильного изображения на передний план в зависимости от положения мыши по отношению к изображению.
Моя новичка Javascript очень ограничена. Прежде чем я начну создавать GIF-изображения, я хочу знать, если это возможно, и если есть решение, которое будет работать на любом веб-браузере. (Если это не поддерживает JavaScript, конечно.)
Я знаю, что можно отложить анимированный GIF из JavaScript, но можно ли также изменить точное изображение, которое нужно отобразить?Отображение одного изображения из файла с несколькими изображениями (анимированный) GIF

ответ

4

Насколько я знаю, это невозможно.

Такие вещи обычно выполняются с использованием техники "CSS sprites", где различные ступени склеиваются рядом друг с другом в одно гигантское изображение. Тогда это изображение будет использовано как background-image в меньшем элементе. background-position определит, какое изображение показано.

Независимо от того, будет ли это работать для вас, будет зависеть от того, имеют ли ваши изображения одинаковые размеры или нет. Это имеет преимущество над надежностью работы во всех браузерах, даже IE6.

+0

CSS Sprites добавляют более приятное решение, поскольку оно позволяет мне вместо этого использовать JPG или PNG-файл. :-) Изображения будут одинакового размера, поэтому проблем нет. –

+0

@Workshop, тогда все будет хорошо. Существуют даже инструменты для «компиляции» спрайтов с отдельных изображений. Просто склейте их вместе в одной длинной строке и установите «background-position» в правильную позицию x –