Создаем динамические кнопочки-ссылки с помощью CSS

Комментарии (153)

1. 

   Александр

   16 лет 9 месяцев назад

   В соответствии со спецификацией, в background-position нельзя сочетать ключевых слова с числовыми значениями.

   «One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:»

   13 Colors and Backgrounds

   Хотя помню, что сам где-то так делал))

   Спасибо за статью как раз пригодилась для конкретного проекта.

2. 

   Dimox

   16 лет 9 месяцев назад

   Спасибо за подсказку. Исправил и приму к сведению.

   За статью пожалуйста. Рад, что она помогла.

3. 

   sk0t

   16 лет 8 месяцев назад

   Очень познавательно, однако, я столкнулся с такой проблемой:

   [cc lang="html"] … [/cc]

   при событии onclick выполняется код JavaScript, но не переход по ссылке. Для того чтоб всё работало, я заменил событие onclick на событие onmouseup.
   На этой странице кнопка работает, но если скопировать код кнопки в отдельный докумнт, происходит описанное выше. Объясните пожалуйста, что я не так сделал?

4. 

   Dimox

   16 лет 8 месяцев назад

   sk0t, по сути, ни событие onclick, ни событие onmouseup нам вообще не нужны, поскольку отжима кнопки при клике просто можно не успеть увидеть — в этот момент может загружаться другая страница, все зависит от задержки между кликом по кнопке и началом загрузки данных.

   В JavaScript я не силен, но полагаю, что событие onclick поможет в том случае, если кнопку использовать с дополнительным яваскрипт-кодом, и не как ссылку, а именно как кнопку к какой-нибудь форме.

   А здесь кнопка работает потому, что она ссылается на эту же страницу и ничего больше не загружает.

5. 

   sk0t

   16 лет 8 месяцев назад

   Спасибо за разъяснение.
   Только у меня ссылка вела на исполняемый файл (HTML-Autorun) и возвращение кнопки в нормальное состояние было для меня актуальным.

6. 

   Dimox

   16 лет 8 месяцев назад

   Тогда, видимо, вам нужно поступать, как я и говорил — использовать комбинацию onclick, которая в примере, + код ява-скрипта, который бы запускал этот файл.

7. 

   Sergey

   16 лет 7 месяцев назад

   Отличный сайт, Dimox!

   Трудно было оставить комментарий, поскольку картинка с буквами закэшировалась, но очень хотелось похвалить!

   Молодец!!!

8. 

   Dimox

   16 лет 7 месяцев назад

   Спасибо, Сергей, очень приятно!

9. 

   DeadLy

   16 лет 7 месяцев назад

   Сделал для input`ов, но в ИЕ криво работает, т. е. нет при наведении подсветки, не подскажите?, вот что получилось:

   input.button{
     font: bold 12px arial, sans-serif;
     color: #555;
     line-height: 13px;
     text-decoration: none;
     background: transparent top right no-repeat;
     border: 0;
     cursor: pointer;
   }
   span#button{
     display: block;
     float: left;
     background: url(button_r.gif) top right no-repeat;
     padding-right: 25px;
     outline: none;
     position: relative;
   }
   span#button b{
     display: block;
     line-height: 13px;
     background: url(button_l.gif) no-repeat;
     padding: 7px 0 10px 23px;
   }
   span#button:hover {
     background-position: 100% -33px;
   }
   span#button:hover b{
     background-position: 0% -33px;
     color: #222;
   }
   span#button:active{
     background-position: 100% -66px;
   }
   span#button:active b{
     background-position: 0% -66px;
     color: #222;
     padding: 8px 0 12px 23px;
   }
   

   использовать так:

   <form>
   <span id=button><b><input class="button" type="button" name="check" value="Я согласен с этими условиями!" ></b></span>
   <span id=button><b><input class="button" type="button" name="check" value="Я НЕ согласен с этими условиями!" ></b></span>
   <span id=button><b><input class="button" type="reset"  value="Отмена" ></b></span>
   </form>
   

10. 

    Dimox

    16 лет 7 месяцев назад

    DeadLy, ответ прост — IE версии 6.0 и ниже не воспринимает псевдо-класс :hover для всех элементов, кроме тега <a>. Для решения этой проблемы советую прочитать статью CSS:hover для любого элемента.

11. 

    DeadLy

    16 лет 7 месяцев назад

    Dimox, спасибо, но я behavior’ом решил не заморачиватся, решил проблему вот так:

    <style type="text/css">
    input.buttons{
      font: bold 12px arial, sans-serif;
      color: #555;
      line-height: 13px;
      text-decoration: none;
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    a#buttons{
      display: block;
      float: left;
      text-decoration: none;
      background: url(button_r.gif) top right no-repeat;
      padding-right: 25px;
      outline: none;
      position: relative;
    }
    a#buttons b{
      display: block;
      line-height: 13px;
      background: url(button_l.gif) no-repeat;
      padding: 7px 0 10px 23px;
    }
    a#buttons:hover {
      background-position: 100% -33px;
    }
    a#buttons:hover b{
      background-position: 0% -33px;
      color: #222;
    }
    a#buttons:active{
      background-position: 100% -66px;
    }
    a#buttons:active b{
      background-position: 0% -66px;
      color: #222;
      padding: 8px 0 9px 23px;
    }
    </style>
    

    <form action="test.php" method="GET">
    <a href="#" id=buttons><b><input class="buttons" type="submit" name="check" value="Я согласен с этими условиями!" ></b></a>
    <a href="#" id=buttons><b><input class="buttons" type="submit" name="check" value="Я НЕ согласен с этими условиями!" ></b></a>
    <a href="#" id=buttons><b><input class="buttons" type="reset"  value="Отмена" ></b></a>
    </form>
    

12. 

    Dimox

    16 лет 7 месяцев назад

    DeadLy, вот и замечательно. Только есть минус в этом варианте — HTML-код не валидный.

13. 

    DeadLy

    16 лет 7 месяцев назад

    когда придумаю полностью валидный код — напишу сюда))

14. 

    juice

    16 лет 5 месяцев назад

    Dimox, спасибо за статью, очень подробно и по делу! Хотел бы еще добавить вот чего: ие6 при наведении курсора загружает картинку с сервера по-новой — так называемый IE flickering bug. И дело даже не в трафике :), а в том, что на время загрузки картинки фон пропадает. Я сделал так: обернул ссылки в контейнеры (подошли li), которым в качестве фона задал ту же картинку в дефолтном положении. И хоть ие все равно ломится на сервер, мерцания уже не наблюдается.

15. 

    Dimox

    16 лет 5 месяцев назад

    Пожалуйста, juice.

    Ну, ИЕ как всегда отличился :))). Спасибо за информацию, приму к сведению.

16. 

    Виктор Орлов

    16 лет 4 месяца назад

    Здравствуйте! Огромное спасибо Вам за эту замечательную статью.
    CSS только начинаю изучать. поэтому куча вопросов:
    Подскажите, а как прижать кнопку в верхний левый угол?
    вот мой код:

    a.button {
      display: block;
      float: left;
      padding-right: 25px;
      outline: none;
      position: relative;
    }
    a.button span {
      display: block;
      line-height: 49px;
      background: url(images/knopka_gold.png) no-repeat;
      padding: 9px 0 13px 23px;
    }
    a.button:hover {
      background-position: 100% -70px;
    }
    a.button:hover span {
      background-position: 0% -70px;
      color: #222;
    }
    a.button:active {
      background-position: 100% -140px;
    }
    a.button:active span {
      background-position: 0% -140px;
      color: #222;
      padding: 10px 0 12px 23px;
    }
    

    <a href="" class="button" onclick="this.blur(); return false;"><span><img src="/new/images/unvisible.gif" border="0" width="97" height="49"></span></a>
    

    Еще раз огромное спасибо!

17. 

    Dimox

    16 лет 4 месяца назад

    Виктор, я вижу, что по ссылке probegauto.ru/new/, которую вы давали, все в порядке. Вопрос еще актуален?

18. 

    Виктор Орлов

    16 лет 4 месяца назад

    Все в норме. Оказывается в css разрешены отрицательные координаты
    top: -10px решили проблему.
    Спасибо.
    Теперь возник еще один вопрос. Ответ на него будет интересен многим.
    Если взять за вариант — изготовление css меню, то какими средствами (видимо JavaScript) подсвечивать выбранный ранее пункт меню?
    Представим себе:
    Выбираем кнопку меню ГЛАВНАЯ,
    загружается Главная страница и кнопка меню ГЛАВНАЯ подсвечивается,
    что указывает на факт нахождения именно на странице ГЛАВНАЯ.
    Как этого добиться?
    Немного сумбурно, но вполне понятно.

19. 

    Dimox

    16 лет 4 месяца назад

    Замечательно, что разобрались.

    По поводу выделения текущего пункта меню. Во-первых, сначала для него нужно создать отдельный CSS-класс. Во-вторых подставление этого класса к текущему пункту осуществляется либо вручную (если страницы статические), либо, если страницы динамические, средствами движка. Т. е. используется программирование.

    С помощью JavaScript, наверное тоже такое возможно, только я не знаю как.

    Т. е. вам нужно исходить из того, каким образом создаются страницы.

20. 

    vicvicor

    16 лет 4 месяца назад

    Поборол я проблему.

    Сначала описываем еще один класс:

    a.buttonactive {
      display: block;
      float: left;
      padding-right: 0px;
      outline: none;
      position: relative;
    }
    a.buttonactive span {
      display: block;
      background: url(images/m0.png) no-repeat;
      padding: 0px 0 0px 20px;
      background-position: 100% -35px;
    }
    

    $spn=basename($_SERVER['SCRIPT_FILENAME']); //Имя страницы
    
    Теперь ссылки на страницы:
    $pagename[0]="lot_new.php";	
    $pagename[1]="buycar.php";	 
    $pagename[2]="salecar.php";
    $pagename[3]="kredit.php";
    $pagename[4]="insurance.php";
    $pagename[5]="contacts.php";
    
    
    а теперь:
    for ($i = 0; $i <= 5; $i++) {
      	 echo '<td><a href='.$pagename[$i].' ';
     	   if ($spn==$pagename[$i]) echo 'class="buttonactive" '; else echo 'class="menubutton" '; 
     	   echo ' ><span><img src="/new/images/unvisible.gif" border="0" width="90" height="35"></span></a></td>';
        }
    

    Теперь еще один вопрос: а как средствами CSS сделать ширину выводимой кнопки фиксированной? Чтобы размер не зависел от количества символов надписи…