Как заменить кнопку формы изображением и изменить его при наведении курсора? Также спрайты против отдельных изображений?

Question

Я помню, как читал где-то (давным-давно), что спрайты - или, по крайней мере, я думаю, что они так назывались - были лучше, чем использование двух изображений, когда вы пытались изменить изображение при наведении курсора.Я полагаю, что рассуждение было связано с отсутствием задержки.Например, иногда я захожу на веб-сайт и нажимаю на ссылку, и на долю секунды там нет изображения ... оно пустое ... до появления второго.Разве это не потому, что второе изображение должно загружаться первым?Если бы это было так, разве «спрайты» не были бы лучше?

Теперь, какой из способов лучше, я бы выбрал.По сути, у меня есть кнопка формы, которую я хочу изменить с изображением ... и когда наведен курсор на нее, я хочу, чтобы она изменилась.люди говорили, что это не правильно, yady yady ya.

Так как мне это сделать?Спрайты или отдельные изображения?И самое главное, как я могу это сделать?

Большое спасибо, Новичок.

Answer 1

Да, духи лучше с точки зрения производительности / пропускной способности, вы должны взглянуть на:

• CSS-спрайты: полезная техника или потенциальная неприятность?
• CSS-спрайты: что это такое, почему они классные и как их использовать
• Экономия полосы пропускания и повышение скорости сайта с использованием CSS-спрайтов

Также взгляните на:

• Генераторы CSS Sprite

Answer 2

CSS-спрайты - это путь, иначе вам придется «предварительно загрузить» ваше изображение при наведении курсора.

Предположим, ваша кнопка имеет ширину 100 пикселей и высоту 20 пикселей.

Создайте новое изображение размером 100 на 40 пикселей, поместив изображение состояния «по умолчанию» вверху, а изображение состояния «зависания» внизу.

Затем в своем HTML создайте свою кнопку.

<input type="button" class="submit" />

Примените ваше новое изображение в качестве фона для элемента кнопки.

.submit {
    display: inline-block;
    width: 100px;
    height: 20px;
    border: 0;
    background: url(button_bg.gif) no-repeat top;
}

Затем просто измените положение фонового изображения в состоянии наведения.

.submit {
    background-position: bottom;
}

Ваше изображение при наведении уже загружено, поэтому задержка не будет.

Веселись!