Собственно, подойдёт тем, кто не особо разбирается в CSS/JS, и просто хочет поменять картинку при наведении. Для массовых замен лучше поискать более действенный способ, этот будет идеальным для смены 1-3 картинок.

CSS:

Код:
.kartinka1{
	display: block;
	width: 100px;
	height: 100px;
	background: url('адрес картинки') bottom;
	text-indent: -99999px;
}
.kartinka1:hover {
	background-position: 0 0;
	background: url('адрес картинки при наведении') bottom;
}

Собственно, .kartinka1 - картинка до наведения, .kartinka1:hover - картинка после наведения. При убирании курсора, картинка возвращается в исходное положение.

HTML:

Код:
<a class="kartinka1" href="адрес профиля и т.д."></a>

Всё просто. Если нужно ещё одну картинку добавить, просто создаёте идентичные блоки в css, только меняете название (к примеру, вместо 1 - 2) и меняете в html class="kartinka1" на новое название.