Для того, чтобы сделать эффект некоторой динамичности на сайте не обязательно знать в совершенстве
JavaScript, иногда достаточно иметь навыки использования CSS. Например, применив нехитрый приём, можно сделать так, что при наведении курсора на картинку
вместо неё появится другое изображение. Это называется эффектом перекатывания. Чтобы посмотреть, как
это работает, наведите курсор на картинку ниже:
Давайте теперь попробуем освоить эту фишку. Для начала нужно приготовить 2 картинки одинакового размера.
Вспомните материал урока "Оформление ссылок",
там идёт речь о переопределении стиля ссылок с помощью псевдоклассов. Здесь мы будем использовать тот же эффект,
то есть наши картинки будут фонами для ссылки и второй фон будет заменять первый при наведении курсора.
Как мы помним, при наведении курсора на ссылку её цвет, размер текста, фон и т.д. меняются, за что
отвечает псевдокласс :hover.
Теперь будем писать код и стили CSS. Сначала напишем код ссылки, используя контейнер <a href="#"></a>.
Знак # (решётка) использован в качестве заглушки, нам же не нужно, чтобы картинка была ссылкой на самом деле и куда-то вела.
Сама ссылка будет пустой, поскольку картинка будет использована в качестве фона для ссылки. Чтобы применить
правила CSS, назначим для ссылки класс, например rollover. Вот что мы имеем на данный момент:
Теперь можно написать правило CSS. Назначим для класса rollover стилевое свойство background
со значением адреса первой картинки. Кроме того, чтобы ссылка была по размеру изображения, её нужно
превратить в блочный элемент с помощью стилевого свойства display со значением block.
И укажем также размеры изображения. Вот что у нас получается (напоминаю, что стили CSS присоединяются или
внутри head в контейнере <style>, или в отдельном, подключаемом файле):
Теперь подключим вторую картинку, используя псевдокласс :hover, который присоединим к селектору
a с классом .rollover. Назначим фоном адрес второго изображения:
Ну вот и всё, сохраняем всё это и любуемся результатом! :)
Но есть ещё один способ создания эффекта перекатывания, при котором можно обойтись только одним
графическим файлом, который, однако, объединяет два или несколько изображений. Этот приём называется "CSS-спрайты"
и используется чаще, потому что загружается быстрее и снижается количество запросов к серверу.
Здесь замещение одного изображения другим осуществляется путём сдвига исходного рисунка по вертикали.
Для этого используется универсальное свойство background-position. Давайте попробуем это выполнить.
Вот наш исходный графический рисунок с размерами 257 пикселей по ширине и 122 по высоте:
Сначала напишем код ссылки, где вместо ссылки снова используем заглушку (#):
Для селектора a с классом rolloverSp зададим свойство background с указанием пути
к фоновому изображению, причём ширину укажем ту же (257), а высоту - половину нашей картинки, то есть 61 пиксель:
То есть сначала мы увидим верхнюю, синюю, часть картинки. Теперь, так же как и в предыдущем случае,
используем псевдокласс со смещением фона:
Всё сохраняем и получаем следующее (попробуйте сами):
Пробуйте и экспериментируйте. До встречи в следующем уроке!
Скажите, а если у меня таких кнопок две, одна под другой, одна русская, а другая английская, как для них сделать?
Ответ: Если Вы хотите сделать эффект перекатывания, то неважно, что написано и как на картинках, важно, чтобы они располагались одна под другой, как написано в уроке.
Попробуйте сделать и покажите результат, посмотрим.
Если Вы хотите сделать эффект перекатывания, то неважно, что написано и как на картинках, важно, чтобы они располагались одна под другой, как написано в уроке.
Попробуйте сделать и покажите результат, посмотрим.
АААААА, я как то весь инет перерывал в поисках того, как сделать такую штуку! Но так и не нашёл! Кстати, а как ещё сделать затемнение на кнопки статистики?
