Кнопка с подсветкой?

Тема в разделе "Веб-дизайн", создана пользователем win32.liock, 30 мар 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. win32.liock

    win32.liock Писатель

    Регистр.:
    1 фев 2009
    Сообщения:
    5
    Симпатии:
    0
    Как реализовать кнопку с подсветкой?
    Она светлого цвета (например, белого или серого) и при наведении она должна менять цвет на серый или белый.
    Плюс, если я нахожусь в разделе, которому соответствует эта кнопка, она должна держать этот же цвет, который появляется при наведении.
     
  2. ne0zx

    ne0zx

    Регистр.:
    1 ноя 2008
    Сообщения:
    212
    Симпатии:
    74
    win32.liock нравится это.
  3. Псевдоним

    Псевдоним

    Регистр.:
    23 фев 2009
    Сообщения:
    300
    Симпатии:
    68
    Вот вам вкусная пища для ума:
    http://www.artlebedev.ru/tools/technogrette/html/hover_vs_javascript/
     
    xDina нравится это.
  4. veronika

    veronika Постоялец

    Регистр.:
    13 июн 2006
    Сообщения:
    88
    Симпатии:
    13
    woweb.ru эффекты при наведении мыши
     
  5. cocacola

    cocacola Постоялец

    Регистр.:
    4 апр 2006
    Сообщения:
    137
    Симпатии:
    48
    А что мешает взять за пример какой нибудь сайт и покопаться в коде?

    http://www.apple.com/ - вот тут меню для примера
     
  6. Ёжег

    Ёжег Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    82
    Симпатии:
    108
    Вот готовый вариант кнопки с подсветкой при наведении, взял из движка DataLife Engine
    <input onClick="doAddComments();return false;" name="submit" type="submit" style="width:120px; height:34px; padding-bottom:1px; color:black; font-size:12px" value="Комментировать">
     
  7. Burunduk1982

    Burunduk1982

    Регистр.:
    26 мар 2007
    Сообщения:
    627
    Симпатии:
    112
    самый простой способ через css

    в коде вашей html-страницы присваиваете ссылке стиль

    HTML:
    <a href="#" class="rol">ссылка ролловер</a>
    в файле стилей например style.css создаете класс .rol, либо прямо в html-странице перед тегом </head> (если в теле страницы, тогда стиль необходимо заключить в теги <style></style>)

    HTML:
    
    .rol {width:120px; height:30px; font-size:12px; font-family:Arial}
    
    .rol a:link a:active a:visited {color:#FFFFFF; background:url(images/black_bgimage.gif) no-repeat #000000;}
    
    .rol a:hover {color:#000000; background:url(images/white_bgimage.gif) no-repeat #FFFFFF;}
    
    white_bgimage.gif (120х30px) подгружается при наведении на ссылку. Можно сделать анимацию эффекта подсвечивания, тогда при наведении на ссылку будет полноценный эффект.

    вариантов великое множество, от возможностей css, js и flash, до расширенных возможностей и связей css+js+flash... т.е. эффект можно создать абсолютно любой, а как реализовать (проще/сложнее) дело ваше
     
  8. SunTzu

    SunTzu Создатель

    Регистр.:
    21 фев 2009
    Сообщения:
    25
    Симпатии:
    1
    Сайт - статика или динамика?
     
  9. Burunduk1982

    Burunduk1982

    Регистр.:
    26 мар 2007
    Сообщения:
    627
    Симпатии:
    112
    а какая разница? любой шаблон формируется на костях html+css+js, а статичный ли сайт или динамичный уже совсем другой, не связанный с дизайном впорос.
     
  10. DaemDoGG™

    DaemDoGG™ Прохожие

    Ролловер несложно делать, можно через js, можно через css, как предлагали выше.
     
Статус темы:
Закрыта.