Как сделать так чтобы при наведении курсора менялась картинка

Как сделать так чтобы при наведении курсора менялась картинка
Как сделать так чтобы при наведении курсора менялась картинка
Как сделать так чтобы при наведении курсора менялась картинка
Как сделать так чтобы при наведении курсора менялась картинка
Как сделать так чтобы при наведении курсора менялась картинка

Смена одной картинки на другую при наведении на нее курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но во многих случаях вполне достаточно и CSS.
Псевдокласс hover
Вначале разберем, как делается собственно сам эффект. Для этой цели используется псевдокласс hover, он через двоеточие добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже hover работает только со ссылками, тогда как другие браузеры понимают hover и для других элементов. Так что для универсальности придется помещать изображение внутрь контейнера <A> . Сам рисунок добавляется и меняется с помощью стилевого атрибута background. Алгоритм действий следующий.
Готовится два изображения одинакового размера, одно для исходного вида, а второе - для его замены при эффекте перекатывания.
Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевой атрибут background со значением url('URI'), здесь URI - путь к графическому файлу.
Присоединяем псевдокласс к селектору A (a:hover) и снова включаем атрибут background, но в качестве значения указываем замещающее изображение.
Чтобы ссылка была по размеру картинки, ее следует превратить в блочный элемент с помощью атрибута display со значением block, а также задать высоту и ширину ссылки.
Остается собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к параметру href тега <A> .
Пример 1. Использование псевдокласса hover
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!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(images/sun1.png); / Путь к файлу с исходным рисунком / display: block; / Рисунок как блочный элемент / width: 196px; / Ширина рисунка / height: 183px; / Высота рисунка / } A.rollover:hover { background: url(images/sun2.png); / Путь к файлу с заменяемым рисунком / } </style> </head> <body> <p><a href="#" class="rollover"> </a></p> </body> </html> Приведенный способ хотя и прост в реализации, но имеет определенный недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.
Эффект перекатывания с одним рисунком
Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.
Смена одного рисунка на другой осуществляется сдвигом изображения по вертикали за счет использования универсального атрибута background или background-position, как показано в примере 2.
Пример 2. Изменение положения рисунка
HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0
<!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(images/mark.png); / Путь к файлу с исходным рисунком / 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 и становится видна оранжевая вкладка.

Все рецепты HTML и CSS   Теги:

1. Разместил Дмитрий 17.07.2010, 21:16

Подскажите пожалуйста.Я все сделал как вы объяснили но,какртинка вообще не отображается,просто пустая ссылка.

2. Разместил admin 17.07.2010, 23:04

с путями проблемы наверное

3. Разместил Дмитрий 21.07.2010, 03:39

спасибо

4. Разместил Дмитрий 21.07.2010, 03:53

с путями все в порядке,проверяю с помощью "фаербуг" в мазиле, работают все стили кроме "background" его там вообще нет.Помогите пожалуйста.

5. Разместил Дмитрий 21.07.2010, 04:15

Все спасибо ненадо я сам разобрался.все правельно напутал с путями.

6. Разместил Димон 08.08.2010, 18:39

А можно ваще сделать активное изображение и не париться.

7. Разместил grand_day 17.08.2010, 02:10

почему я не могу разместить второе изображение, добавляю второе а оно заменяется или первым или первое заменяет второе

8. Разместил bataliy 28.08.2010, 11:27

Подскажите а как сделать что бы данная картинка могла находится внутри текста и при этом не опускала его вниз (во 2 примере)

9. Разместил user 19.10.2010, 23:11

Код просто бомба! +100 постеру! Код немнога подправил по себя.

10. Разместил Инга 31.01.2011, 01:22

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

11. Разместил Инга 31.01.2011, 01:26

Вообще идея в том, что имеется 2 картинки одна ч\б другая такая же только цветная, при наведении на ч\б картинку чтобы она становилась цветная а при клике переходила на мой сайт. Излопатила пару десятков сайтов, нашла только сложные скрипты, но разобраться в них не могу, хотелось бы только подставить свои адреса картинок в скрипт и что бы работало.

12. Разместил nulife.narod.ru 31.01.2011, 09:40

Тоже перелопатил пол-интернета. Вариантов до черта, но все со своими особенностями и в каждый нада вникать. Работенка еще та. Уже и не соображаешь, че выбрать. Обращусь еще к своим книгам по html. Хотелось бы простой короткий код. Самое главное, что бы хорошо работал во всех браузерах. Пока остановился на простом варианте, это даже не javascrit:
<img src="pic.jpg" id="imag" onmouseover="this.src='/img1.gif'" onmouseout="this.src='/img2.gif'">
где, pic.jpg картинка по умолчанию, /img1.gif - картинга загружаемая при наведении мыши,
/img2.gif - картинка загружаемая после убирания мыши.
Результат можно посмотреть тут
<a href="http://nulife.narod.ru/forum.html" target="_blank">http://nulife.narod.ru/forum.html</a>

13. Разместил серж 23.03.2011, 11:41

На основе этого примера сделал вертикальное меню
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>сантехмастер меню</title>
<style>
A.rollover {
background: url(http://sa-master.kiev.ua/New_shablon/button.png);/ Путь к файлу с исходным рисунком /
display: block; / Рисунок как блочный элемент /
width: 151px; / Ширина рисунка в пикселах /
height: 22px; / Высота рисунка /
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
padding-top:8;
Color: #FFF;
font-size:14px;
margin:4px;
}
A.rollover:hover {
background-position: -152px; 0; / Смещение фона /
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;"
padding-top:8;
Color: #363636;
font-size:14px;
margin:4px;
}
</style>
</head>
<body>
<a href="http://sa-master.kiev.ua/" class="rollover">главная</a>
<a href="http://sa-master.kiev.ua/publ/" class="rollover">о нас</a>
<a href="http://sa-master.kiev.ua/index/prajs_list/0-12" class="rollover">статьи</a>
<a href="http://sa-master.kiev.ua/gb/" class="rollover">расценки</a>
<a href="http://sa-master.kiev.ua/photo/" class="rollover">отзывы</a>
<a href="http://sa-master.kiev.ua/forum/0-0-1-34" class="rollover">работы</a>
<a href="http://sa-master.kiev.ua/New_shablon/right.gif" class="rollover">форум</a>
</body>
</html>
А как бы его переделать в горизонтальное?

14. Разместил 04.06.2012, 10:43

Было бы не плохо снабдить наглядным примером.

Всего : 14, на странице: 14

Редакция портала:

Благодарим за просмотр этой информации на нашем компьютерном портале. Надеемся, что обзор Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?, в разделе Все рецепты HTML и CSS вам понравился. Есть небольшая рекомендация, если вы хотите быть в курсе всех событий сферы информационных технологий, то рекомендуем зарегистрироваться на портале www.stfw.ru.

Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка Как сделать так чтобы при наведении курсора менялась картинка

Тоже читают:



Повседневная прическа для длинных волос своими руками

Схема ходовых огней гост

Вязать снуд на круговых спицах схема вязания

Полная схема подключения гидроаккумулятора

Вязаные заяц крючком со схемами и описанием