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

Question

Я использую HTML и CSS для создания веб-страницы. Я хочу создать кнопки, которые имеют файл .gif, который у меня уже есть. Я использую div для размещения элементов на самой странице. Как использовать изображение, а также использовать функции опрокидывания, чтобы изображение менялось на другое изображение, которое у меня другое.

Спасибо.

Answer 1

Изменения URL изображения работает, но может быть помехой, если изображения не поджаты или кэш пользователя отключен.

Оформить спрайты FTW.

http://css-tricks.com/css-sprites/

Быстрое определение спрайтов является большим изображением, содержащим несколько меньших изображений. Таким образом, изображение 10x20, при нормальном состоянии которого находится верхний 10x10, и состояние зависания - это нижнее 10x10. Пользователь видит только верхнюю 10x10 благодаря CSS:

.button 
{ 
    display: block; 
    width: 10px; 
    height: 10px; 
    background-image: url(to-image.gif); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

затем при наведении курсора мыши, он перемещается к нижней части изображения

.button:hover 
{ 
    background-position: bottom left; 
} 

Answer 2

Сделайте элемент кнопки фиксированным и установите файл .gif в качестве фона элемента в CSS. Затем вы можете использовать класс: hover для элемента, чтобы изменить изображение. Здесь я использую тег «A», поэтому он работает на IE6.

<a class="button"></a> 

.button { 
    display: block; 
    background-image: url(default.gif); 
    width: 100px; 
    height: 20px; 
} 

.button:hover { 
    background-image: url(hover.gif); 
}