Свой первый хабратопик я хотел бы посвятить созданию простого, элегантного и привычного каждумо механизма — Wizard.

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

Перейдем от лирики к делу…

Для продолжения нам понадобится:
1. библиотека prototype.js
2. две картинки
… и все.

Вот так это будет выглядеть в процессе:
image

Рабочий пример находится здесь.

Идея очень простая: на каждом шаге визарда заменять list-style-image для элементов списка. Тривиально, но очень наглядно. + Ко всему решение получилось достаточно гибкое и может быть легко встроено в существующие приложения.

P.S. Все выше описанное было сделано специально для первого хабратопика и не является законченным приложением. ;) имейте это пожалуйста ввиду при оценке материала.