Еще несколько трюков веб-разработки
Как-то в статье Как реализовать кнопку, не используя, собственно, кнопку? я писал о том, как сделать кнопку в HTML не используя теги “input” и “button”. Метод хорош, но имеет один существенный недостаток: бэкграунд, вызываемый псевдоклассом :hover только по этому вызову и загружается. Поэтому, если мы используем достаточно большой бэкграунд, то при наведении мышки на див мы некоторое время будем видеть просто пустое место (так как старый бэкграунд исчез, а новый еще не загружен с сервера).
Чтобы этого избежать, в самом начале разметки мы создадим блок, в который поместим интересующий нас бэкграунд. Блоку этому дадим абсолютное позиционирование, и left:, скажем, -3000px, чтобы его точно никто не увидел. Теперь интересующая нас графика будет загружаться стопроцентно раньше любого действия пользователя со страницей.
Также можно сделать кнопку подобную стандартной кнопке виндоус вообще без графики:
Достигается это с помощью CSS:
a:link {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}
a:visited {
padding: 10px;
border-left: 2px solid #eee;
border-top: 2px solid #eee;
border-bottom: 2px solid #929292;
border-right: 2px solid #929292;
background: #ddd;
}
a:hover {
padding: 10px 8px 10px 12px;
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
border-top: 2px solid #929292;
border-left: 2px solid #929292;
background: #bbb;
}
Еще достаточно интересный трюк – оборачивание дива ссылкой. Строго говоря, такая конструкция не валидна (ссылка по умолчанию – строковый элемент, дивак – блочный), но если на этом не заморачиваться, то можно полностью отказаться от карт-изображений (ох уже эта точная подгонка активной зоны), и от таблиц (хотя само изображение можно свободно резать по количеству блоков).
————————————-
В тему: