Итак для начала создадим заготовку.... Фон меню... 
Кнопки меню... - До навидения указателя мыши.
-После навидения указателя мыши
<head>
<style>
/*Устанавливаем параметры стиля фона*/
#fon { background-image:url(fon.png); /* Изображения фона меню */ background-position:top; /*Выравнивание фона меню */ width:143px; /*Ширина фона меню*/ height:256px; /*Высота фона меню*/ }
/*Устанавливаем параметры кнопок меню*/ #bt { display:block; /* Обозначаем текущею область как блок(прямоугольник) */ background-image:url(b1.png); /* Задаем фон кнопки до наведения указателя мыши */ background-repeat:no-repeat; /* Повторяться фон не будет */ color:#CCCCCC; /* Цвет текста */ text-align:left; /* Выравнивание текста по левому краю */ font-family:Geneva, Arial, Helvetica, sans-serif; /* Выберем шрифт */ font-size:12px; /* Размер шрифта */ text-decoration:none; /* Убираем нижнее подчеркивание ссылок */ vertical-align:middle; /* Вертикальное выравнивание по центру */ padding-left:10px; /* Отступ слева, для текста */ padding-top:5px; /* Отступ сверху, для текста */ margin-left:5px; /* Отступ слева */ margin-top:2px; /* Отступ сверху */ width:131px; /* Ширина */ height:23px; /* Высота */ }
/*Устанавливаем параметры кнопок после наведения указателя мыши*/ #bt:hover { background-image:url(b2.png); /* Задаем фон кнопки после наведения указателя мыши */ background-repeat:no-repeat; /* Повторяться фон не будет */ }
</style> </head>
<body>
<div id=fon > <!-- Блок меню --> <a href="#" id=bt >Home</a> <a href="#" id=bt >Download</a> <a href="#" id=bt >Forum</a> </div>
</body>
|