Меняющиеся кнопки меню на JavaScript.


Нередко дизайн сайта предполагает наличие кнопок меню, которые меняются при наведении на них мышкой. Сделать это можно двумя способами: с помощью JavaScript и с помощью стилей CSS. Сегодня мы поговорим про первый вариант, а именно – как сделать меняющиеся кнопки меню на JavaScript.

Вот типичный пример таких кнопок.

Чтобы его реализовать, нужно проделать несколько простых шагов.

Шаг первый. Прежде всего, необходимо подготовить сами кнопки, при этом каждая из них будет иметь два варианта (с одинаковым размером): одна до наведения указателя мышки, другая – при наведении. Изображения сохраняются в папку img или image. Расширение файлов может быть png, jpg или gif. В нашем случае – это png. Обратите внимание, что текст на кнопках также находится уже в самом изображении. Два варианта одной и той же кнопки отличаются лишь цветовой гаммой.

Шаг второй. Создаем html-код списка меню с вкраплением элементов JavaScript. В нашем случае это выглядит так:

<ul id="head_menu">
<li class="h_menu"><a href="#"onmouseover="home.src='/img/home-active.png'"onmouseout="home.src='/img/home.png'"><img src="/img/home.png" width="125" height="55" alt="" border="0"name="home"></a></li>
<li class="h_menu"><a href="#"onmouseover="price.src='/img/price-active.png’"onmouseout="price.src='/img/price.png'"><img src="/img/price.png" width="149" height="55" alt="" border="0"name="price"></a></li>
</ul>

Сам код первоначально выводит на экран ссылки с изображениями по умолчанию: home.png и price.png. Это кнопки в неактивном состоянии. Чтобы кнопки могли менять свой внешний вид, мы добавляем также в код ссылки обработчики событий (действий пользователя): onmouseover и onmouseover. Первый задает адрес картинки, которая должна быть подгружена при наведение мышкой на изображение, вторая – адрес той, которая отображается, когда мышка не находится над областью изображения.

Обратите внимание, что чтобы код работал корректно, в html коде изображения (в теге Name) вы должны указать также его уникальное имя. В нашем случае – это home и price. В конструкции home.src и price.src не забудьте указать собственные имена изображений.

Третий шаг. Создаем стили для нашего меню, чтобы все отображалось так, как нам нужно (здесь вы можете задавать любые значения, которые нужны для вашего сайта). Здесь мною использовались такие стили:

#head_menu {
position:relative;
float:left;
margin-left:10px;
margin-right:270px;
width:544px;
height:55px;
display:inline;
}
.h_menu {
position:relative;
display:inline-block;
float:left;

}

Эти стили можно поместить в файл style.css.





Другие посты

Категория: JavaScript для сайта

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

 

  1. Лина:

    Вставляю скрипт-при нескольких кнопках смена кратики происходит только на одной,остальные недвижимы…Как быть?

  2. Лина:

    Разобралась!Спасибо!

Оставить комментарий