Форум

kirill1989 · #1 (**permalink**) 08.12.2014, 21:59

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

Есть ли какое то унивирсальное решение?

рони · #2 (**permalink**) 08.12.2014, 22:02

kirill1989,
class

kirill1989 · #3 (**permalink**) 08.12.2014, 22:04

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

рони · #4 (**permalink**) 08.12.2014, 22:09

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

kirill1989 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 08.12.2014, 22:27

Сообщение от Aetae

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 · #8 (**permalink**) 08.12.2014, 22:44

Сообщение от kirill1989

Если возможен вариант сделать кнопку резиновой изначально без разрезки на три части, то подскажите пожалуйста.

В моём коде именно такая.

kirill1989 · #9 (**permalink**) 08.12.2014, 23:40

Сообщение от Aetae

В моём коде именно такая.

Спасибо огромное тема закрыта!

Форум

Справочник

Discord чат

Курсы javascript