Помощь с макетом

[Neograff]

Добрый день.

Я пока только учусь верстать и мне нужна ваша помощь

Есть макет страницы в котором присутствует вот такой элемент:

То есть при нажатии на определенный этап под ним появляется текст, а кнопка этапа заменяется фигурой человечка.

Подскажите как такое можно реализовать?

[gurylyov]

Прежде уточняющий вопрос: На каждом этапе должен быть свой человечек или везде одинаковый?

[Neograff]

В самом начале где видны все этапы фигурка "человечек на старте", а потом при нажатии на этапы, этап заменяется уже "бегущим" это одна картинка и она на всех этапах.

Edited November 16, 2011 by Neograff

[gurylyov]

Пока что реализовал вот так: http://jsfiddle.net/Gurylyov/mh4sk/1/

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

Edited November 17, 2011 by gurylyov

[Neograff]

чтоб этапы позади человечка были белыми, без рисунка как бы

Вау... очень хорошо получилось.

Сейчас буду разбираться как у вас это получилось и как теперь градиенты css заменить картинками =)

А зачем этапы белыми делать? Мне кажется не нужно... Ведь так если посетитель захочет вернуться почитать этап то не сможет, потому что он пропадет =)

Edited November 17, 2011 by Neograff

[gurylyov]

Коли не надо, тем проще

А вот сделать человечка на старте без js у меня не получается. В принципе, об этом речи не было, но я старался без js сделать в силу привычки, хотя с js всё это было бы проще. Сделать-таки всё это js или оставить как есть?

p.s. градиенты можно оставить. работают почти во всех браузерах. на крайний случай, чтоб работало даже в ie6, можно добавить после background-color: #063053; строку background-image: url(rainbow.png);, где rainbow - тот же самый градиент, но отрисованный картинкой высотой в 1 пиксель и повторяющуюся вертикально.

Если что-то не будет получаться, не стесняйтесь - спрайшивайте.

[Neograff]

Коли не надо, тем проще

А вот сделать человечка на старте без js у меня не получается. В принципе, об этом речи не было, но я старался без js сделать в силу привычки, хотя с js всё это было бы проще. Сделать-таки всё это js или оставить как есть?

p.s. градиенты можно оставить. работают почти во всех браузерах. на крайний случай, чтоб работало даже в ie6, можно добавить после background-color: #063053; строку background-image: url(rainbow.png);, где rainbow - тот же самый градиент, но отрисованный картинкой высотой в 1 пиксель и повторяющуюся вертикально.

Если что-то не будет получаться, не стесняйтесь - спрайшивайте.

Можно и js если без него не получается человечка на старте сделать, не столь важно на чем будет.

А можно как то каждому "кружку"- этапу, присвоить отдельный рисунок?

Просто с градиентом сделанным с помощью css не так красиво смотриться как с обычной картинкой.

Ну и естественно линию тоже рисунками...

Я начал ваш код переделывать, пока что то не очень выходит: http://kiryanov.info

Вот изображения: http://kiryanov.info/chel.rar