Замена изображения при наведении

Сегодня познакомимся с очень интересным эффектом css - замена изображения при наведении.

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

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

a img {
	filter:alpha(opacity=50);
	opacity: 0.3;
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
}

a:hover img {
	filter:alpha(opacity=90);
	opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
}

Замена изображения при наведенииГде значение 0.3 - прозрачность картинки, при том когда мы не навели на изображение.

0.8 - прозрачность картинки при наведении.

После этого все картинки на странице будут иметь данный стиль, если же вы хотите задать отдельный стиль для отдельной картинки - присвойте конкретному атрибуту класс (class).

Пример эффекта справа

Далее посмотрим как сделать динамическую картинку с помощью css, при этом картинка будет одна, изменяясь в разные.

a.dinamic  {
	background:  url('/im/other/facebook.png');
	display: block; /*Рисунок как блочный элемент */
	width: 19px;
	height: 18px;
}

a.dinamic:hover {
	background-position:0 -18px;
	/* Смещаем по горизонтали */	/* Смещаем вверх по вертикали */
}

Это сам пример, наведите на значок Facebook

Код вставки меняющейся картинки:

<a href="#" class="rollover"></a>

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Действие по времени с помощью PHP

Переменные в javascript

Javascript - работа с массивами

Как через интернет звонить бесплатно

Php скрипт вывода случайных заметок

Комментарии:

Добавленно - 2011-03-23

Кенни пишет:

А как сделать разноцветную подсветку с помощью javascript? Подсветка картинки при помощи css3 не работает у меня :(
Прозрачность картинки не выставляется, как была тёмная так и осталась.

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =