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 я долко втыкал но так и не допёрло как связать ссылку изображение и контейнер?( помогите разобраться

Так в этом фишка я задание делаю именоо нужно использовать без изображений средствами css

Ребят такая ситуация вот я с помощью css нарисовал трапецию ,вот код:#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } потом присваиваю это css правило div контейнеру мне нужно чтобы была рамка горизонтальная по всему сайту с низу из трапеций как это реализовать,думал насчёт функции repeat но она подходит только для background image