Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   onmouseover проблема (https://javascript.ru/forum/misc/52216-onmouseover-problema.html)

kirill1989 08.12.2014 21:59
onmouseover проблема
 
Доброго времени суток всем! Проблема такая, создал я графическую кнопку меню, порезал на три части, сделал так что бы она растягивалась в зависимости от размера ссылки. Нужен был эффект hover изменения (картинки при наведении), CSS средствами решить не удалось, поскольку при наведении на одну часть кнопки одна чать и менялась. Применил JavaScript, назначил каждой ячейки td свой id. Все работает но только для первого пункта меню. Это как я понял каждой ячейки нужно задавать уникальный id и прописывать код?:blink: Есть ли какое то унивирсальное решение?

рони 08.12.2014 22:02
kirill1989,
class

kirill1989 08.12.2014 22:04
А можно по подробнее пожалуйста, я в JavaScript новичок

рони 08.12.2014 22:09
kirill1989,
делайте макет -- но скорее всего вам нужен специалист по css, а не js.

kirill1989 08.12.2014 22:09 
<!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>


вот собственно код

Aetae 08.12.2014 22:16
kirill1989, парень ты из комы вышел? Уже лет десять никто так не делает.

Если я правильно понял чего ты хочешь, то в современном вебе это выглядит примерно так:
<style>
  a{
    border-style: solid; 
    border-width: 6px 9px 3px;
    border-image: url(http://javascript.ru/forum/images/editor/css.png) 6 9 3 fill stretch;
    padding: 2px 5px;
    transition:padding 1s;
  }
  a:hover{
    padding: 2px 25px;
  }
</style>
<a href="http://javascript.ru">javascript.ru</a>
(и ещё пяток способов)

kirill1989 08.12.2014 22:27
Цитата:
Сообщение от Aetae (Сообщение 345592)
kirill1989, парень ты из комы вышел? Уже лет десять никто так не делает.

Если я правильно понял чего ты хочешь, то в современном вебе это выглядит примерно так:
<style>
  a{
    border-style: solid; 
    border-width: 6px 9px 3px;
    border-image: url(http://javascript.ru/forum/images/editor/css.png) 6 9 3 fill stretch;
    padding: 2px 5px;
    transition:padding 1s;
  }
  a:hover{
    padding: 2px 25px;
  }
</style>
<a href="http://javascript.ru">javascript.ru</a>
(и ещё пяток способов)
Я имел ввиду вот есть у меня кнопка меню, я ее сделал резиновой в зависимости от длины ссылки ( при загрузки страницы она принимает автоматически свой размер ), но при наведении на кнопку нужно что бы три части меняло цвет. Если возможен вариант сделать кнопку резиновой изначально без разрезки на три части, то подскажите пожалуйста.

Aetae 08.12.2014 22:44
Цитата:
Сообщение от kirill1989 (Сообщение 345594)
Если возможен вариант сделать кнопку резиновой изначально без разрезки на три части, то подскажите пожалуйста.
В моём коде именно такая.

kirill1989 08.12.2014 23:40
Цитата:
Сообщение от Aetae (Сообщение 345601)
В моём коде именно такая.
Спасибо огромное тема закрыта!


Часовой пояс GMT +3, время: 03:34.