<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
.button{
background:url(center_fiolet.png);
width: auto;
height: 54px;
background-repeat:repeat-x;
}
.left_green{
background:url(left_green.png);
background-repeat:no-repeat;
width:19px;
height:51px;
}
.button2{
transition:0.5s;
background:url(center_green.png);
width: auto;
height: 54px;
background-repeat:repeat-x;
}
.rigth_green{
background:url(right_green.png);
background-repeat:no-repeat;
width:19px;
height:51px;
}
.text_href{font-family: Basic, sans-serif;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: 1.3em;
color: #453269;
text-decoration:none;}
/*.button2:hover{
transition: 0.5s;
background:url(center_active.png);
width:auto;
height:54px;
background-repeat:repeat-x;
}*/
/*.left_green:hover{
transition: 0.5s;
background:url(left_active.png);
width:19px;
height:50px;
background-repeat:no-repeat;
}*/
.test{
background:url(button_active3.png);
background-repeat:repeat-x;
width: auto;
height:54px;
}
</style>
<script type="text/javascript">
//дожидаемся полной загрузки страницы
window.onload = function () {
//ищем элемент по селектору
var a = document.querySelector('#hover');
var a2 = document.querySelector('#hover2');
var a3 = document.querySelector('#hover3');
var href = document.querySelector('#text_href');
//вешаем на него события
/* a.onmouseout = function(e) {
document.getElementById('hover').style.background='url(left_green.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.5s';
}*/
a.onmouseover=function(e) {
document.getElementById('hover').style.background='url(left_active.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_active.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#E1FBA9';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_active.png)';
document.getElementById('hover3').style.backgroundRepeat='no-repeat';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
a2.onmouseover=function(e) {
document.getElementById('hover').style.background='url(left_active.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_active.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#E1FBA9';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_active.png)';
document.getElementById('hover3').style.backgroundRepeat='repeat-x';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
a3.onmouseover=function(e) {
document.getElementById('hover').style.background='url(left_active.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_active.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#E1FBA9';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_active.png)';
document.getElementById('hover3').style.backgroundRepeat='no-repeat';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
//Смена меню на исходную позицию
a.onmouseout=function(e) {
document.getElementById('hover').style.background='url(left_green.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_green.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#453269';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_green.png)';
document.getElementById('hover3').style.backgroundRepeat='no-repeat';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
a2.onmouseout=function(e) {
document.getElementById('hover').style.background='url(left_green.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_green.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#453269';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_green.png)';
document.getElementById('hover3').style.backgroundRepeat='repeat-x';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
a3.onmouseout=function(e) {
document.getElementById('hover').style.background='url(left_green.png)';
document.getElementById('hover').style.backgroundRepeat='no-repeat';
document.getElementById('hover').style.width='19px';
document.getElementById('hover').style.height='51px';
document.getElementById('hover').style.transition='0.3s';
document.getElementById('hover2').style.background='url(center_green.png)';
document.getElementById('hover2').style.backgroundRepeat='repeat-x';
document.getElementById('hover2').style.width='auto';
document.getElementById('hover2').style.height='51px';
document.getElementById('hover2').style.transition='0.3s';
document.getElementById('text_href').style.color='#453269';
document.getElementById('text_href').style.transition='0.3s';
document.getElementById('hover3').style.background='url(right_green.png)';
document.getElementById('hover3').style.backgroundRepeat='no-repeat';
document.getElementById('hover3').style.width='19px';
document.getElementById('hover3').style.height='51px';
document.getElementById('hover3').style.transition='0.3s';
};
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<img src="left_fiolet.png" />
</td>
<td class="button"><div style="padding-bottom:0px;">
<a href="#">ССылка №1</a></div>
</td>
<td valign="top">
<img src="right_fiolet.png" />
</td><sction id="some">
<td class="left_green" id="hover">
</td>
<td class="button2" id="hover2">
<div style="padding-bottom:10px;">
<a href="#" id="text_href" class="text_href">Ссылка. Ссылка №2</a></div>
</td>
<td class="rigth_green" id="hover3">
</td>
<td class="test">
<a href="#">Тестова кнопка меню</a>
</td>
</tr>
</table>
</body>
</html>
вот собственно код