Боюсь, что в рамках короткого ответа этого не описать. В приведенной Вами задачке соединяются вместе несколько технологий, каждая из которых — свой огромный мир. В какой пропорции их соединить зависит от очень большого числа факторов. Перечислю в порядке возрастания сложности эти технологии со ссылками на учебные материалы:
1.
HTML
2.
CSS3
3.
HTML DOM
4.
JavaScript
5. Писать многие вещи с нуля на голом JS интересно будет только для целей самообразования. В большинстве случаев, можно и нужно воспользоваться готовыми фреймворками. Один из таких популярных пакетов —
JQuery
Пожалуй, вот
тут сделали хороший пример, демонстрирующий некоторые приемы объединения всех этих технологий в рабочий элемент управления.
Альтернативный вариант, это взять что-нибудь готовое и допилить под свои нужды. Полезно покопаться в чужом коде и подсмотреть как оно там работает. Отличный кандидат для вскрытия по Вашей задачке это
Raphaël