Допустим, я хочу сделать свой собственный нестандартный GUI на javascript. Там будут кнопки, фоновая картинка, текст и изменяемые картинки. Кнопки нажимаются. Фон, понятно, растягивается на всё окно браузера. А остальное поверх него рисуется отдельными мелкими картинками (спрайтами). Для каждого элемента изображения может быть более одного спрайта-фазы и рисуется только нужное (кнопка нажата/отжата). Вопрос, как их позиционировать. Какие варианты я вижу:
1) всё сделать с размер окна браузера (пока технические мелочи, мол у всех окна разные — опустим). в изображениях накладываемых поверх фона всё прозрачное, кроме того места, где кнопка нарисована, например. события привязываются через image map.
2) делается для фоновой картинки image map в котором определяются прямоугольные области, в которые вставляются более мелкие спрайты из отдельных картинок.
3) аналогично с п.2, кроме того спрайты не отдельными файлами, а упакованы плотно в один файл, для извлечения спрайта из которого используется ещё один image map.
Больше ничего в голову не приходит. Ну кроме забить координаты прямо в исходник...
Ещё вопрос удобства рисования картинок. Пункт 1 самый удобный (можно в gimp всё в разных слоях сделать и тут же смотреть — WYSWYG). Пункт 2 тоже WYSWIG, но в слоях с мелкими картинками размер слоя меньше размера изображения (при экспорте подгоняется под размер слоя), нужно нудно вручную image map делать, причём точно пиксель-в-пиксель всё равно не совпадёт и позиционирование «спрайтов» будет слегка не точное. Пункт 3 нифига не WYSWYG, зато грузится быстрей.
Как бы ещё автоматом от п.1 или п.2 перейти к п.3...
