Эффект перекатывания с помощью стилей
Эффектом перекатывания называют замену одного изображения другим при наведении на него курсора мыши. То есть, как только курсор оказывается на рисунке, картинка меняется на другую, мышь уводится в сторону и рисунок становится прежним. Обычно для создания эффекта перекатывания применяется JavaScript, но во многих случаях вполне достаточно и CSS.
Псевдокласс hover
Вначале разберем, как делается собственно сам эффект. Для этой цели используется псевдокласс hover, он через двоеточие добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Увы, но браузер Internet Explorer версии 6 и ниже в данном случае умеет работать только со ссылками, тогда как другие браузеры (в частности, Firefox и Opera) понимают hover и для других элементов. Так что для универсальности кода придется помещать изображение внутрь контейнера <A>. Сам рисунок добавляется и меняется с помощью стилевого параметра background. Алгоритм действий следующий.
- Готовится два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
- Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевой атрибут background со значением url('URI'), здесь URI — путь к графическому файлу.
- Присоединяем псевдокласс к селектору A (a:hover) и снова включаем параметр background, но в качестве значения указываем замещающее изображение.
- Чтобы ссылка была по размеру картинки, ее следует превратить в блочный элемент с помощью атрибута display со значением block, а также задать высоту и ширину ссылки.
На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).
а 
б
Рис. 1. Картинки для создания эффекта перекатывания
Остается собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к параметру href тега <A>.
Пример 1. Использование псевдокласса hover
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('1.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
border: 1px solid #000; /* Рамка вокруг картинки */
}
A.rollover:hover {
background: url('2.gif'); /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>
<p><a href="#" class="rollover"> </a></p>
</body>
</html>
Результат данного примера показан ниже.
Приведенный способ хотя и прост в реализации, но имеет определенный недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Рис. 2. Изображение с двумя картинками
Смена одного рисунка на другой осуществляется сдвигом изображения по вертикали за счет использования универсального атрибута background или свойства background-position, как показано в примере 2.
Пример 2. Изменение положения рисунка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
Результат данного примера показан ниже.
Для селектора A устанавливается фоновое изображение через параметр background, ширина (width) совпадает с рисунком, а высота (атрибут height) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.
При наведении на ссылку фон смещается вверх на 40 пикселов с помощью свойства background-position и становится видна оранжевая вкладка.
Резюме
Эффект перекатывания редко применяется самостоятельно, в том смысле, что пользователям не нужна картинка, которая просто меняется на другую. Поэтому данный эффект используется для акцентирования внимания на ссылках, создания меню, выделения вкладок и др. Область действия ограничена лишь нашей фантазией и целесообразностью.
| Статья опубликована: 04.01.2007 | Последнее обновление: 04.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
coder
06.01.2007
off!
12.01.2007
bankr
16.01.2007
Onik
17.01.2007
. И в опре 6 не подерживаеться - хотя думаю что такой гадостю (Оперой 6) уже давно не пользуеться.catsmeetman
18.01.2007
SAiNT
23.01.2007
имхо данный способ идеален для 1-2 ролловеров, а если делать меню, то лучше по-старинке, через яву.
Алекс
02.02.2007
StAnk
11.02.2007
Шурик
18.02.2007
И еще - по моему, можно как-то очень просто на яве в одну строчку сделать прелоад этих картинок, тогда можно и через две картинки. Кто помнит синтаксис, как?
wassil
21.02.2007
гениально!
Драконыч
23.02.2007
Мне препод на курсах не так понятно объясняет , как написано здесь. Спасибо! Я много полезного для себя почерпнул здесь
Денис Воронов
27.02.2007
MSIE 6 22866773 72.55%
MSIE 5 4971741 15.77%
Netscape 7 2594670 8.23%
Other 570559 1.81%
Netscape 4 320227 1.01%
MSIE 4 140963 0.44%
Netscape 3 24746 0.07%
Opera 6 18380 0.05%
MSIE 3 4285 0.01%
Opera 5 867 0.00%
AOL 4 319 0.00%
Netscape 2 276 0.00%
Opera 4 43 0.00%
MSIE 2 21 6.66%
Opera 3 17 5.39%
WebTV 1 5 1.58%
Amiga-AWeb 3 4 1.26%
AOL 3 1 3.17%
IBrowse 1 1 3.17%
xChaos Arachne 1 1 3.17%
ArtLeo
01.03.2007
P.S. Не устаю поражаться полезности данного сайта. По моему глубокому убеждению - один из лучших в сети.
iat
14.03.2007
не раз выручил меня.
спасибо Влад. и если кто-то еще работает над проектом, спасибо всем
LD
14.03.2007
mel
23.03.2007
Максим
25.03.2007
To Onik (17.01.2007)
Можно выйти из ситуации прозрачными пикселями - дополнить ими меньшую высоту.
Влад Мержевич
26.03.2007
Используй inline вместо block. Тогда слои встанут по горизонтали.
Тарас
28.03.2007
На некоторых сайтах менюшки на флеше делают
иса
30.03.2007
Киса
30.03.2007
Роберт Дениско
31.03.2007
Скачали Macromedia Fireworks и там за минуту делаем гораздо более качественные фичи. Лишняя фича, короче.almarein
31.03.2007
а так оста?тся ощущение инкубатора.
TeaR1nG
03.04.2007
warwar
12.04.2007
paraLaX
14.04.2007
Yoon (Latvia)
18.04.2007
Zv.r
21.04.2007
например как здесь http://www.ashwebstudio.com/
r-tem
25.04.2007
На каждой странице сайта вверху прописываешь(пример местный беру):
<style type="text/css">
A.rollover#current {
background-position:
0px /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
А в ссылке добавляешь:
<a href="link.html" class="rollover" id="current"></a>
И он перекрывает правило, прописанное до этого.
На php это проще сделать...Надо привязать класс или id к какой-нибуть переменной...Реализаций несколько, но принцип тотже...
TycoooN
29.04.2007
PinokkioT
30.04.2007
Jana
30.04.2007
Автору статьи.. спасибо!!!!
Влад Мержевич
02.05.2007
Если обычный текст надо в ячейке выровнять, используйте vertical-align. Если речь о рисунке идет, то его положение определяется параметром background-position.
2 Zv.r
04.05.2007
Rac3r
05.05.2007
RenTgeN
07.05.2007
Vector
16.05.2007
Побеждается проблема просто: под ролловерные изображения-ссылки подкладываются обычные изображения-ссылки, которые, кстати, могут выступать как изображения для подмены! Skyangel
22.05.2007
Skyangel
25.05.2007
Влад Мержевич
25.05.2007
Ник
25.05.2007
Подбери подходящий !DOCTYPE и все станет на места.
HTMLCODER.exe
08.06.2007
Это же МИФ!
HoHo
15.06.2007
Дмитрий
18.06.2007
Денис
19.06.2007
<form method='POST' action='common.php?type=info'>
<td align="center" height="125" bgcolor="#FFFFFF">
<input type='hidden' name='id' value='EL_B110' >
<input type='hidden' name='item' value='Elegance B110'>
<input type='hidden' name='price' value='<?echo window(1,3); ?>'>
<input type='hidden' name='from' value=''>
<input border='0' src="<? echo window(1,5); ?>" name='I1' type='image' onclick='cAbout(this.form)' >
</td></form>
как в этом случае сделать перекатывание?
HuKuToC (kobel169)
20.06.2007
<img onmouseover="src='1.gif'" onmouseout="src='2.gif'" src="2.gif">
</a>
Денис
20.06.2007
Большое спасибо
Сергей
20.06.2007
огромное спасибо что отписали ссылку на эту статью!
долго ждал,но был уверен что ответите!
Вы из тех людей которых любят и заочно и называют "огромный человек"!
неустанно благодарю!я с Вашей помощью на одном ХТМЛе такую красу построил!!!
поставлю сайт на сервер(через пару недель)напишу адрес..на первый взгляд и не верится,что там один ХТМЛ!Спасибо!Спасибо!
Сергей
22.06.2007
Тоже приверженец html потому очень для меня нужная вещь. Уже применил.
спасибо еще раз!
Михаил
23.06.2007
Влад Мержевич
25.06.2007
Грин
10.07.2007
Frozen
10.07.2007
Andi
12.07.2007
используй первый пример, должно работать (может я конечно припоздал)
чтобы избавиться от "подтормаживания" при смене картинок:
<HTML>
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
function preloadImages() {
document.preloadImg=new Array();
var i,arg=preloadImages.arguments;
for(i=0; i<arg.length; i++) {
/*
Браузер подкачивает картинки и более не обращается к серверу
*/
document.preloadImg[i]=new Image();
document.preloadImg[i].src=arg[i];
}
}
</SCRIPT>
</HEAD>
<BODY onload="javascript:preloadImages('img1.png', 'img2.png' [,...]);">
...
</BODY>
</HTML>
Диман
13.07.2007
Andi
14.07.2007
используй JavaScript
<INPUT class="btn_default" type="submit" ...
onmouseover="javascript:this.className='btn_over';"
onmouseout="javascript:this.className='btn_default';">
возможно придеться подгрузить картинки, см. пример выше
Мар
27.07.2007
Andi
31.07.2007
вопрос не совсем корректно задан. вижу два варианта вашего вопроса
1) кнопка отправки с соседнем фрейме
2) отправка данных формы будет происходить в соседний фрейм
в первом случае:
<INPUT ... onclick="javascript:top.frame_name.form_name.submit();" ...>
во втором:
<FORM target="name_frame" ...>
...
</FORM>
PS
оба случая писал от руки (не тестируя), первый случай: могут быть ошибки, возможно придется написать что-то типа: top.frame_name.document.form_name.submit()
Mr. White
11.08.2007
Kos
21.08.2007
Такой эфект перекатывания создается в основном для менюшки. Как применить такой эфект для ссылок в меню? Какой селектор применить для обозначения той или иной ячейки меню? А есле можно то немогли бы Вы описать технологию создания меню таким образом?.. Пожалуйста ! Я хочу замутить се на сайте http://big-boot.narod.ru такую красивую менюху.
Влад Мержевич
23.08.2007
Mr. White
24.08.2007
Влад Мержевич
24.08.2007
Mr. White
26.08.2007
Как это?
bombua
13.09.2007
ссылки на картинки проверь
Учащийся
18.09.2007
Такая же история с таким же результатом... Обидно! Обьясните, пожалуста, как прекратить распространение действия на всю страницу? Хотел сделать несколько элементов (разных) способом номер 2, но не получается... Децствие распространяется на (!) всю (!) страницу....
vanpro-x
21.09.2007
Slavna
29.09.2007
Совет для тех, кто не хочет писать размер каждого изображения для hover, написать вместо:
A.rollover:hover {
background-position:
0px /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
Вот так:
A.rollover:hover {
background-position:
bottom /* Смещение по горизонтали */
left; /* Смещение вверх по вертикали */
}
Евгений
08.10.2007
>05.05.2007
>А я столкнулся со следующей проблемой: IE не хочет выводить этот background
>рисунок меньше 20px в высоту... В FF вс? отлично работает, а в IE вот такой
>интересный косяк. Никто не сталкивался?
Скорее всего проблема в том что используется шрифт с высотой строки свыше 20px, т.е. нужно просто прописать line-height с нужной высотой.
Тема
09.10.2007
<style>
a.menu {
background: url('http://itr.nn.ru/img/menu.png'); /* Путь к файлу с исходным рисунком */
display: inline-table; /* Рисунок как блочный элемент */
width: 100px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
font-size:xx-small; color:#fff; text-decoration:none
}
a.menu:hover {
background-position:
0px /* Смещение по горизонтали */
-30px; /* Смещение вверх по вертикали */
font-size:xx-small; color:#fff; text-decoration:none
}
div.toplink {padding:7; text-align:center}
</style>
<a href="http://itr.nn.ru/" class="menu"><div class="toplink">ссылка</div></a>
Вот только некоторые проблемы с параметром inline. С ним ничего не работает. А с параметром inline-table не работает в firefox.
sergey
09.10.2007
Денис Воронов
18.10.2007
Вебмастер делает сайт для юзеров. Так иногда бывает.
Евгений
31.12.2007
Влад Мержевич
03.01.2008
Voland
23.01.2008
Voland
23.01.2008
Алексей
24.01.2008
Device
26.01.2008
Алексей
28.01.2008
Z0RG
03.02.2008
Это на XHTML 1.0
Sheena
18.02.2008
Влад Мержевич
19.02.2008
position: absolute;
left: -1000px;
top: 0;
}
Sheena
21.02.2008
Sheena
22.02.2008
balalar
28.02.2008
Спасибо!!!
ЖеньШень
02.03.2008
Хочу разместить в одной ячейке таблицы ДВЕ ссылки:
одна - картинка с перекатыванием
другая - текст (со своим стилем)
если не делать картику-ссылку с перекатыванием, вместо нее помещать просто jpg, то ссылка-текст прекрасно стоит рядом и принимает свой стиль
если активизирую картинку (по вашему примеру), то ссылка-текст размещается под ссылкой-картинкой, а не рядом, при этом смещая вс?, что было сверстано
ссылки вообще связаны одним адресом, и можно сделать так
<a href="1234.html" class="rollover" id="group1">Рисунки</a>
НО тогда текст "Рисунки" преобретает стандартный стиль, а не тот, как мне надо. А я хочу определенный!!!!! И чтоб текс размещался рядом с рисунком....
как сделать? скажите, пожалуйста
можно было бы дававить еще столбец, но оч не хочется, все сверстано с бэкграундами
p/s/ я - лузер в программировании, все делаю по статьям на "постройка"
ЖеньШень
02.03.2008
пооооожалуста, подскажите
только во флеш не кидайте, плиз
sarlev
03.03.2008
вадим
04.03.2008
вадим
05.03.2008
<img src="picture1.jpg" onMouseOver="this.src='picture2.jpg'" onMouseOut="this.src='picture1.jpg'">
Andrew
12.03.2008
Но как теперь вернуть прозрачный png?
Mr. Z
12.03.2008
ЖШ
19.03.2008
все-равно объясните, как подложить под перекатывающуюся кнопу картинку (п.с. бекграунд есть... чтоб не в бек грауд, а так... можно ли? и чтоб фигов эксплоурер читал
)Павел
10.04.2008
Игорь
19.04.2008
Арт?м
10.05.2008
Mordraug
19.05.2008
особенность рендеринга IE. (имеется ввиду IE6)Ш?пот
19.05.2008
Stas
29.05.2008
разобрался!!!
<code> <img src="picture1.jpg" onMouseOver="this.src='picture2.jpg'" onMouseOut="this.src='picture1.jpg'"> </code>
только почему-то не меняется курсор на палец когда наводишь на ссылку такую, большинство пользователей войдет в ступор и подумает что это не ссылка.
Евгений
29.05.2008
cbone
01.06.2008
stab venom
06.06.2008
Alen4ik
17.06.2008
Stas
18.06.2008
Скрипт коммерческой доски объявлений Elite-Board 1.2
Сайт производителя: www.illusionweb.ru
Цена производителя: 90$
Обновление: 20 марта 2008 года.
Качаем тут:http://slil.ru/25379396
ICQ:96-49-82
varles.narod.ru
18.06.2008
4 с плюсом тянет
Ulan
17.07.2008
supec
18.07.2008
P.s. Владу огромное спасибо за сайт, за библиотеку тегов и прочего - мне очень помогает !
victori
24.07.2008
картинки перестали меняться, потому что "исправленный" png может позиционироваться только в верхнем левом углу. Т.е. background-position на него не стал действовать.