Изменение при наведении и при нажатии

[Danik25]

Привет!
У меня есть 3 разных картинки. Первая - дефолтная, вторая - с эффектом при наведении, третья - с эффектом при нажатии. Проблема в том, что я не знаю как сделать так, чтобы при наведении первая (дефолтная) картинка изменялась на вторую (с эффектом при наведении), и при нажатии она изменялась на третью (с эффектом при нажатии). Я пробовал через код:

<img title="YouTube" src="/Youtube_off.png"  onmouseover="this.src='/Youtube_active.png';" onmouseout="this.src='/Youtube_off.png';"  alt="YouTube" />

но как туда еще добавить третью кнопку я не знаю.
Пытался еще из этой темы вытащить кнопки, но там они без каких либо картинок, и полностью написаны кодом.
P.S. В кодах я не очень разбираюсь, поэтому если есть возможность, в ответе объяснить: как и куда вставлять тот или иной код. Если же нету возможности, то и на этом останусь премного благодарен
-----------------------------------
UPD:
Нашел я нужный мне css код для кнопок:

#button {
 display: block;
 width: 90px;
 height: 90px;
 background: url(/YT_off.png) no-repeat top;
 }
#button:hover {
 background: url(/YT_hover.png) no-repeat bottom;
 }

#button:active {
 background: url(/YT_on.png) no-repeat bottom;
 }

И вытащил его на сайт через html код -

<a id="button" target="_blank" href="тут сайт"></a>

. Кнопка работает, но проблема в том что я хочу еще 2-3 кнопки добавить, уже с другими картинками, но как это сделать, чтобы коды не мешали друг другу? Еще такой вопрос, как мне назначить позицию на сайте для кнопок в этом html коде:

<a id="button" target="_blank" href="тут сайт"></a>

? Т.е. чтобы одна кнопка стояла там-то, другая рядом, третья в другом месте? Может как-то это делать уже через css код? Еще раз, заранее благодарю