Input vs. Button
Раздел:
Programming /
Вебмастеру
@
25.05.2008 |
Ключевые слова: кнопки css
Автор: xeka
Источник: habrahabr
Прежде чем делать дизайн кнопок форм в виде изображений, стоит подумать все же о реализации этой затеи только с помощью CSS. В противном случае, представьте, сколько картинок для кнопок вам придется прописывать в коде. Думаете не много? Тогда посмотрим, с какими еще проблемами вы можете столкнуться, и как мы их будем решать.
Есть несколько вариантов решения нашей задачи:
1. Использовать <input type="submit" /> и технику замены картинки текстом.
2. Использовать <input type="image" /> и прописывать для каждой кнопки соответствующий путь к изображению.
3. Использовать <button type="submit"></button> и вставить код картинки между тегом button.
Если начать с варианта 2, то проблем не возникнет до тех пор, пока мы не протестируем код в IE 6/7. Если немного «погуглить», то можно обнаружить, что проблема эта давно известная и решается довольно просто с помощью JS. Однако все же хочется обойтись без него.. Поэтому перейдем к способу 3.
И снова все везде работает замечательно, кроме IE. Проблема в том, что браузер не воспринимает код картинки как фон для button. Причина скорее всего в том, что если у вас есть несколько элементов кнопок с одноименным названием атрибутов, то браузер IE6 реагирует только на те элементы, которые были отданы сервером в последнюю очередь.
Наглядные примеры всех 3х вариантов кнопок можно посмотреть здесь. Просто откройте страницу в IE6/7 и вы увидите описанные мною проблемы.
Убедившись, что оба варианта работают изначально некорректно, придется обратиться к нашему 1му способу: просто прописывать стили для <input type="submit" />.
Напишем класс, который будем назначать для всех кнопок:
input.buttons {
background: none no-repeat top left;
border: none;
cursor: pointer;
display: block;
height: 25px;
overflow: hidden;
padding: 0;
margin: 0 2px 0 0;
text-indent: -9999px;
width: auto;
}
Теперь для каждой кнопки пропишем стили отвечающее за фоновое изображние и размеры:
input.updateCart { background-image: url(update-cart.gif); width: 107px; }
input.continueShopping { background-image: url(continue-shopping.gif); width: 146px; }
input.proceedCheckout { background-image: url(proceed-to-checkout.gif); width: 156px; }
Мы будем менять изображения на основе CSS спрайтов, поэтому мы зададим для кнопок правила для момента наведения курсором:
input.buttons:hover { background-position: 0 -25px; }
Смотрится замечательно, конечно кроме IE:
Но ошибка легко исправима, достаточно прописать следующие правила:
input.buttons { font-size: 0; line-height: 25px}
Результат можно посмотреть здесь. Все работает корректно!
И еще один штрих..
Мы добились того, чтобы во всех браузерах кнопки отображались корректно. Однако нерабочим остается hover эффект в IE6. Предлагаю исправить это с помощью небольшого когда на jQuery:
$(document).ready(function(){
$(`input.buttons`).hover(function() {
$(this).css(`background-position`,`0 -25px`);
},
function() {
$(this).css(`background-position`,`0 0`);
}
);
});
Что ж, вариантов больше не осталось и нам пришлось использовать стандартный вариант с . Если у вас есть более изящные решения – предлагайте :)
Ist.
Это интересно:
Распечатать статью
Вернуться в раздел:
Programming /
Вебмастеру
Реклама:
