Div ссылка и Z-index

[Stripped]

Такой вопрос:есть 5 ссылок и 6 картинок 1 статичная находится в контейнере рядом другие нужно подключить к этому контейнеру так чтобы они заменаяли статичную если наводишь на ссылки тоесть к каждой ссылке приписываем по 1 изображению.

Я разобрался как работает это с java :вот код

a href="#" onmouseover="document.getElementById('kartinka').src='../Images/smena2.jpg';" onmouseout="document.getElementById('kartinka').src='../Images/smena1.jpg';">пункт 1</a> <UL> <li><a href="#">пункт 1.1</a></li>

<li><a href="#"> пункт 1.2</a></li>

<li><a href="#"> пункт 1.3</a></li></UL></LI></UL>

<UL>

<LI>

<a href="#" onmouseover="document.getElementById('kartinka').src='../Images/smena3.jpg';" onmouseout="document.getElementById('kartinka').src='../Images/smena1.jpg';">пункт 2</a> <UL> <li><a href="#">пункт 2.1</a></li>

<li><a href="#">пункт 2.2</a></li>

<li><a href="#">пункт 2.3</a></li> </UL></LI></UL>

<UL>

<LI>

<a href="#" onmouseover="document.getElementById('kartinka').src='../Images/smena4.jpg';" onmouseout="document.getElementById('kartinka').src='../Images/smena1.jpg';">пункт 3</a> <UL> <li><a href="#">пункт 3.1</a></li>

<li><a href="#">пункт 3.2</a></li> </UL></LI></UL>

<UL>

<LI>

<a href="#" onmouseover="document.getElementById('kartinka').src='../Images/smena3.jpg';" onmouseout="document.getElementById('kartinka').src='../Images/smena1.jpg';">пункт 4</a> <UL> <li><a href="#">пункт 4.1</a></li>

<li><a href="#">пункт 4.2</a></li>

<li><a href="#">пункт 4.1</a></li>

<li><a href="#">пункт 4.2</a></li> </UL></LI></UL>

</div>

DIV id="guitars">

<img id="kartinka" src="../Images/smena1.jpg" alt="Картинка" /><!--а тут задаём нашу первоначальную картинку которая будет изображаться с самого начала до наведения мыши на пункты меню-->

Но смысл мне нужно разобраться как сделать тоже самое с помощью z-index я долко втыкал но так и не допёрло как связать ссылку изображение и контейнер?( помогите разобраться