Перейти к содержимому


Партнерская программа Kredov

Изменение цвета кнопочки.

#1 DJiBi

DJiBi
  • Пользователь
  • 3 сообщений
  • Репутация: 0
0

Отправлено 27 Март 2012 - 23:21

Здравствуйте. Я не знаю языки программирования, потому и решил обратиться за помощью.
Мне нужно сделать простые кнопочки для сайта. Я уже сделал, так, чтобы при наведении и нажатии они изменялись. Нужно ещё, что бы кнопка изменялась при переходе по ней. К примеру: У меня 3 кнопки, под наименованиями 1,2 и 3. Я нажимаю на кнопку 2 и она становится зелёной, жму на 3 теперь эта кнопка зелёная, а кнопка 2 по стандарту становится голубой, как и прежде.

Вот что у меня уже есть:

<div class="knopochka"><a href="****">ГЛАВНАЯ</a></div>

.knopochka a {
font: bold 10px Verdana, Arial, sans-serif;
text-decoration: none;
text-align:center;
color: #3333CC;
background: url([url="http://croatia.3dn.ru/diz/Knopochka.png"]http:****.png[/url]);
display: block;
width: 121px;
line-height: 21px;
height: 21px;
}

.knopochka a:hover{
background-position: 0px -21px;
text-decoration: none;
color: #3333CC;
}

.knopochka a:active{
background-position: 0px -42px;
text-decoration: none;
color: #3333CC;
}

 

 

  • 0

#2 unfixed

unfixed
  • Пользователь
  • 21 сообщений
  • Репутация: 5

Отправлено 28 Март 2012 - 07:35

Придется прописывать отдельный класс для активной кнопки:

<style>
a.active { color: green; }
</style>

<a class="active" href="" title=""></a>

Т.е. если у вас, например, 3 статичные странички, то на первой странице кнопке «1» ставим класс.

<a class="active" href="" title="">1</a>
<a href="" title="">2</a>
<a href="" title="">3</a>

  • 0

#3 DJiBi

DJiBi
    Topic Starter
  • Пользователь
  • 3 сообщений
  • Репутация: 0

Отправлено 28 Март 2012 - 09:53

Если это можно сделать только таким способом,то очень жаль. Я работаю в системе ucoz, а там можно изменить только дизайн шаблона в целом, но не отдельных страниц.
И ещё, unfixed, ведь active изменяет кнопку при нажатии, а мне нужно при переходе по ссылки. Тоесть загрузилась новая страница и кнопка изменилась. Это возможно работает при помощи visited. Для конкретного примера, понажимайте на этом сайте - http://h-croatia.com...y&id=1&Itemid=4 на кнопки:

 

  • ГЛАВНАЯ
  • НЕДВИЖИМОСТЬ
  • О ХОРВАТИИ
  • О КОМПАНИИ
  • КОНТАКТ
  • КАРТА ХОРВАТИИ

 

 

 

unfixed, все же спасибо что написали, твоё предложение мне понравилось.


  • 0

#4 DJiBi

DJiBi
    Topic Starter
  • Пользователь
  • 3 сообщений
  • Репутация: 0

Отправлено 28 Март 2012 - 13:55

Пораскинул мозгами, и сделал как предложил unfixed. Спасибо ему за совет. Но, если у кого-то есть предложения как сделать это проще, буду рад.
Вот как это у меня получилось (может пригодиться кому):
<div class="knopochka1"><a href="http://***/">ГЛАВНАЯ</a></div>
<div class="knopochka"><a href="http://***/publ">НЕДВИЖИМОСТЬ</a></div>
<div class="knopochka"><a href="http://***/dir/">О КОМПАНИИ</a></div>

.knopochka a {
font: bold 11px Tahoma, Verdana, sans-serif;
text-decoration: none;
text-align:center;
color: #2d4ca4;
background: url([url="http://croatia.3dn.ru/diz/Knopochka.png"]****.png[/url]);
display: block;
width: 121px;
line-height: 21px;
height: 21px;
}
.knopochka a:hover{
background-position: 0px -21px;
text-decoration: none;
color: #2d4ca4;
}

.knopochka a:active{
background-position: 0px -42px;
text-decoration: none;
color: #2d4ca4;
}
.knopochka1 a {
font: bold 11px Tahoma, Verdana, sans-serif;
text-decoration: none;
text-align:center;
color: #ffffff;
background: url([url="http://croatia.3dn.ru/diz/Knopochka2.png"]****2.png[/url]);
display: block;
width: 121px;
line-height: 21px;
height: 21px;
}

  • 0


Оформление форума – IPBSkins.ru