Показать сообщение отдельно
  #5 (permalink)  
Старый 08.12.2014, 22:09
Интересующийся
Отправить личное сообщение для kirill1989 Посмотреть профиль Найти все сообщения от kirill1989
 
Регистрация: 17.06.2013
Сообщений: 13

<!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>


вот собственно код
Ответить с цитированием