<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

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

Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример - это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.

Многие, конечно, будут делать это на JavaScript, хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

<div class="img"></div>

Теперь CSS-код:

.img {
  background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию
  height: 100px; // Высота картинки
  width: 100px; // Ширина картинки
}
.img:hover {
  background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
  border: 2px solid #f00; // Устанавливаем красную рамку
  height: 120px; // Высота новой картинки
  width: 120px; // Ширина новой картинки
}

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (63):

soffrick soffrick 05.06.2012 11:18:12

Еще бы не помешало познакомиться с другими псевдоклассами. А также картинку можно менять и средствами JavaScript (событие Onmouseover="document.getElementById('imageID').src='путь к новой картинке'")

Ответить

Admin Admin 05.06.2012 14:27:07

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

Ответить

soffrick soffrick 05.06.2012 16:00:53

Через JS метод более извращенный и он хуже тем, что не у каждого пользователя включен JS.

Ответить

soffrick soffrick 05.06.2012 18:14:30

Ещё бы не помешало познакомиться со спрайтами и сэкономить на дополнительных картинках :)

Ответить

kuller kuller 16.06.2012 10:26:25

на js можно зделать более интересней смену картинок. хотя сам тоже пользуюсь css

Ответить

zuryan zuryan 16.06.2012 20:14:11

Все понятно доступно Спасибо за науку!

Ответить

lev_100rus lev_100rus 10.07.2012 16:44:13

Михаил! А как сделать, чтобы при наведении на кнопку она не сразу становилась красная к примеру, а медленно начинала краснеть!))) И тоже самое при отведении мыши от кнопки? Надо сделать к примеру в фотошопе gif анимацию и в css коде указать путь.gif так?

Ответить

Admin Admin 10.07.2012 17:40:46

Можно и так, а можно через JavaScript это сделать.

Ответить

lev_100rus lev_100rus 10.07.2012 18:13:00

На моём сайте все кнопки были сделаны при помощи js! Но как тут уже писали не у всех он включён! Переделал всё на css! Спасибо за ответ!

Ответить

setsumi setsumi 28.08.2012 14:37:46

Здравствуйте! Я ставлю тег <div> между тегом <a href>, чтобы при наведении курсора на ссылку менялась картинка. Проблема в том, что код становится невалидным, то есть тег <div> не может стоять на этом месте. Подскажите, пожалуйста, как можно исправить ситуацию.

Ответить

Admin Admin 28.08.2012 19:38:43

Туда нельзя поставить <div> в любом случае. Всё, что можно сделать - поставить туда <span>

Ответить

setsumi setsumi 28.08.2012 20:32:19

Большое спасибо!

Ответить

setsumi setsumi 29.08.2012 06:38:26

Так, а при span ни картинки, ни ссылки не отображаются. Что делать?

Ответить

Admin Admin 29.08.2012 11:53:58

span не вместо <a>. Имелось в виду что только <span> можно внутрь добавить, а тот же <div> нельзя.

Ответить

setsumi setsumi 29.08.2012 12:01:19

Я именно так и делаю - ничего не отображает. Вот код: <a href="index.html" title="Новости"><span class="img1"></span></a>. Что-то написано неверно?

Ответить

Admin Admin 29.08.2012 12:12:49

Сам текст ссылки должен быть какой-нибудь. <a href="1.html"><span>Ссылка 1</span></a> title это только всплывающая подсказка.

Ответить

setsumi setsumi 29.08.2012 12:24:49

К сожалению, это не подойдет. Я пыталась так сделать, но получилась полнейшая чушь. Мне нужна ссылка картинкой, которая притом меняется при наведении на нее курсора. А так получается, что она вместе с текстом, который совершенно не нужен. Пробовала вставить картинку - та же ситуация. Я не знаю, может быть есть какой-нибудь другой способ, кроме java? Или проще оставить дивы? Я смотрела в разных браузерах, все отображается корректно, за исключением ie. Но и там, разве что картинка не меняется. Может быть, это не сильно страшно - для одного-то браузера...

Ответить

Admin Admin 30.08.2012 22:09:03

Если не сильно страдает кроссбраузерность, можете и оставить как есть.

Ответить

bosna bosna 20.09.2012 01:39:31

Михаил, подскажите пожалуйста. вот учебный сайт http://spiceboxes.ru/test-s/ Я хочу, чтобы при наведении курсора на пункты меню, они меняли цвет. но получается только рамка при наведении курсора. и еще. я прописывала hover для всех тегов "а", но такой эффект только на верхнем меню получается, для ссылок в футере это не работает (и не надо, чтоб работало, но странно, что так получается). в чем ошибки?

Ответить

Admin Admin 20.09.2012 12:19:02

Не работает потому, что неправильно прописываете селекторы для hover, поэтому видно только рамку внешнего элемента, или вообще не срабатывает.

Ответить

bosna bosna 20.09.2012 12:28:06

в чем неправильно. вроде все как положено

Ответить

Admin Admin 20.09.2012 16:59:51

Если работает, отлично. А если не получается задавать сразу, то проще всего менять свойства в firebug, чтобы сразу видеть результат.

Ответить

master master 13.11.2012 00:54:24

Здравствуйте Михаил. При кодировке текста сайта создаю ссылки в шапке сайта с переходом на разделы текста на этой же странице с помощью фотографий. Как сделать ссылками эти же фото, но уже на другой странице с переходом не просто на предыдущую страницу, а на эти же якоря в текстах?

Ответить

Admin Admin 13.11.2012 06:41:54

Не понял вопроса.

Ответить

master master 13.11.2012 10:15:55

Извините. Вопрос: Как сделать ссылку, чтобы она открывала другую страницу, но не просто страницу, а определённый текст на этой странице? И ещё, как прикрепить свой аватар в наших комментариях?

Ответить

Admin Admin 13.11.2012 10:39:51

Понял, очень просто: <div id="text">Нужный текст</div> А ссылка должна быть такой: <a href="page.html#text">Ссылка</a>

Ответить

master master 13.11.2012 11:21:16

Большое спасибо. А как задавать свой аватар в различных комментариях? Просто обязывает мой возраст.

Ответить

Admin Admin 13.11.2012 11:24:35

В каких комментариях?

Ответить

master master 13.11.2012 11:34:34

Например, я пишу этот коммент. И вместо моего аватара написано, "аватар не задан", а у Вас ваше фото и имя.

Ответить

Admin Admin 13.11.2012 11:39:52

В пользовательском меню перейдите по ссылке: "Редактировать профиль". Там Вы сможете загрузить аватар.

Ответить

master master 15.11.2012 16:42:32

Здравствуйте Михаил, ещё раз прошу о помощи. По вашему совету делаю так: <div id="text">Кожа+ Плёнка пхв (2 л. мет.)</div> — это прямо в тексте на одной странице. А это ссылка на неё с другой страницы: <a href="page.html#text"><img src="http://porog.at.ua/vinil1.jpg" height="190px"></a> Не получается сделать ссылку с одной страницы на другую в соответствующее место текста. При переходе появляется страница с 404 ошибка.

Ответить

Admin Admin 15.11.2012 17:04:09

page.html - это пример названия страницы, у Вас она может быть index.html, about.html или page_1.html. Вы должны его заменить на своё название, тогда и не будет 404.

Ответить

master master 15.11.2012 20:30:27

Как я не догадался! Спасибо за науку. Буду продолжать изучение вашего курса "Создание сайта от А до Я" Ваша отзывчивость и готовность помочь вызывает особое уважение.

Ответить

GoTo GoTo 28.11.2012 13:35:09

Михаил, можете все-таки прояснить ситуацию, как сделать картинку, которая меняется, ссылкой? Если я пишу: <div class="img"><a href="http://index.html" title="Подсказка."></a></div>, то меняется только картинка, а ссылки нет. Если же наоборот поставить <div> внутрь <a>, то код не валидный. В итоге, картинка меняется, а как сделать ссылку на этой картинке? Спасибо.

Ответить

Admin Admin 28.11.2012 15:26:27

Можно сделать "a" блочным элементом, display: block; А затем задавать ему background в виде картинки, при a:hover background ставить другой.

Ответить

GoTo GoTo 28.11.2012 16:42:52

Михаил, я сделал так. Теперь ссылка есть, но вторая картинка не появляется. .img a { display: block; background: url("http://exp.ru/image1.jpg") no-repeat; padding: 21px 12px; } .img:hover { background: url("http://http://exp.ru/image2.jpg") no-repeat; height: 55px; width: 62px; }

Ответить

GoTo GoTo 28.11.2012 16:49:14

И еще появился интересный эффект. Когда на картинку нажимаю, то она продавливается. Т.е. как если бы я нажимал на кнопку. :-)))

Ответить

Admin Admin 28.11.2012 19:42:24

Не img:hover, а a:hover.

Ответить

Ольга Ольга 17.02.2013 18:25:06

Здравствуйте,Михаил! Подскажите, пож-та, как сделать , что бы при наведении мышкой на fancy-картинку появлялся бы темный фон с текстом? находила варианты в инете, но то ли они с fancy не совместимы, то ли еще что, но не получилось сделать такой эффект. Заранее,спасибо! fancy - когда при нажатии на картинку она увеличивается и дальше можно смотреть другие картинки.

Ответить

Admin Admin 17.02.2013 21:25:55

http://myrusakov.ru/css-window-dark.html - за основу возьмите это.

Ответить

Ольга Ольга 17.02.2013 21:29:58

это уже сделано - окно появляется при клике на картинку. А как сделать что ыб при наведении (hover) появлялся бы текст?

Ответить

Admin Admin 18.02.2013 09:20:02

Чтобы появился какой-то текст, нужно уже использовать JS и обработчик события onmouseover.

Ответить

Ольга Ольга 18.02.2013 10:02:21

понятно, спасибо.Я думала можно сделать с помощью css.

Ответить

пспспспс пспспспс 24.03.2013 15:58:54

Не отображается все равно div, объясните по сильнее с высотой и шириной

Ответить

Admin Admin 24.03.2013 16:52:29

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

Ответить

пспспспс пспспспс 24.03.2013 21:43:49

Проверьте пожалуйста мой код) ну схема такая создал файл с расширением ксс указал к нему путь через линк в хеде <link href="что-то).css" rel="stylesheet" type="text/css" /> картинки попридумывал указал ширину высоту как в картинке,но <div class="img"></div> просто так не робит) в тэге если вставляю что тогда появляется картинка, по другому не отображается див

Ответить

Admin Admin 25.03.2013 04:13:42

Опять же и здесь может быть ошибка в href. Используйте firebug.

Ответить

пспспспс пспспспс 25.03.2013 08:41:51

Прекрасно ссылается хриф, если код выглядит так <div class="img"><img src="x_3885b26b.jpg" width="400 height="400" hspace="30"></div>, то начинает работать только загораживает другая картинка) и мне не понятно как отобразить этот пустой див что бы работало, иначе не отображается, т.е. все прекрасно работает не могу задать рамки нормально, .img { background: url("i (2).jpg") no-repeat; height: 150px; width: 129px; } .img:hover { background: url("iweVqwuw4uo34.jpg") no-repeat; border: 2px solid #000000; height: 129px; width: 61px; } и тут вроде норм указал или нет?

Ответить

Admin Admin 25.03.2013 09:19:24

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

Ответить

пспспспс пспспспс 25.03.2013 11:08:41

Ооо мужик) не понял ничего, все файлы и картинки в одной папке лежат, я же не шарю в этом пытаюсь этот урок пройти научиться и Нуль) причем с красной рамкой отлично прошелся урок) а тут с этим div не могу. Уж слишком руки кривые) поломай чуть голову ппожалуйста) и объясни по доходчивее

Ответить

utro utro 02.05.2013 15:01:23

Михаил, подскажи, пожалуйста. Целый день бьюсь над этой сменой картинки в меню, а ничего не выходит. Вот пример: <div id="menu"> <p><a href="">Главная</a></p> <p><a href="">Классификация</a></p> <p><a href="">Инструменты</a></p> <p><a href="">Установка</a></p> <p><a href="">Полезные советы</a></p> <p><a href="">Работы</a></p> </div> вот стили: #menu { width: 220px; border: none; padding: 0px; margin-left: 10px; float: left; } #menu p { text-align: center; background: url(images/h.jpg); margin: 0 0 1px } #menu a { display: block; text-decoration: none; color:#FFF; padding: 10px } #menu a: hover { background: url(images/m.jpg); color: #000 } (h.jpg) вижу, а (m.jpg) не появляется при наведении мыши.

Ответить

Admin Admin 02.05.2013 16:30:23

Возможно, путь к картинке указан неверно. И ещё непонятно, зачем указывать фон у p, а затем у a:hover, надо указывать и там, и там <p>, либо <a>.

Ответить

utro utro 03.05.2013 07:49:25

Путь указан верно. Проверял несколько раз. Последний раз, чтобы уже наверняка, указал местонахождение файла через контекстное меню Dreamweaver. Указывал фон и только для Р: #menu p{}...#menu p: hover{}, и только для А: #menu a{}...#menu a: hover{}, изменений нет.

Ответить

Admin Admin 03.05.2013 11:57:28

http://myrusakov.ru/html-dreamweaver.html, а пользоваться нужно firebug для проверки правильный путь или нет, подключаются стили или нет.

Ответить

utro utro 04.05.2013 06:55:20

нашел ответ: ошибка всего в одном пробеле #menu p: hover. Исправил на #menu p:hover и все заработало

Ответить

pavell pavell 17.08.2013 18:57:51

Михаил прошу прощения что отвлекаю. Скажите пожалуйста Как сделать кнопку в меню? Картинкой. Я делаю так: <a fref = "index.html><img src = "картинка.jpg" alt = "главная">Как сделать чтоб картинка менялась в данном случае? И если можно совет как делают кнопки нормальные люди (я смотрел другие сайты и ваш исходный код и никто не делает как я).

Ответить

Admin Admin 17.08.2013 19:57:07

Так и делайте, блоком, как в этой статье.

Ответить

сергейростов сергейростов 10.11.2013 21:09:30

михаил здравствуй.можно этот урок подро бнее описать?голову сломал но ничего не получается.картинка появляется сзади первой (т е только ее край виден)и без красной границы.пути указаны правильно background: url("images/jj.jpg") no-repeat; но все равно ничего не выходит.заранее спасибо

Ответить

Admin Admin 10.11.2013 21:37:00

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

Ответить

zurbapet zurbapet 21.03.2014 01:48:42

Михаил, что здесь не так, провозился весь вечер и не получилось. Я залил фото в библиотеку, взял оттуда ссылку, все по размеру, но картинок не видно, только текст вместо их. Вот код <div class="img">.img { background: url("http://petrzurba.ru/wp-content/uploads/2014/03/foto1.jpg") no-repeat; // height: 240px; // width: 113px; // } .img:hover { background: url("http://petrzurba.ru/wp-content/uploads/2014/03/foto2.jpg") no-repeat; // border: 2px solid #f00; // height: 628px; // width:823px; // } </div> Подскажите пожалуйста. Если можно пришлите пример с моих фото,я ведь не програмист, это так для души у меня блог, так что не обессудьте чайника. Вот мое детище -http://petrzurba.ru/ Спасибо за Ваши статьи, уже многому научился.

Ответить

aneryadov aneryadov 10.12.2014 10:37:24

очень красиво получилось.. и элегантно) Спасибо

Ответить

Munzil Munzil 18.12.2014 11:36:05

Все прекрасно работает, но с одной картинкой, мне надо в ряд 4, и когда я хочу сделать то же самое со второй то картинка просто не меняется, попробовал js, проблема такая же. Подскажите пожалуйста что я делаю не правильно?

Ответить

vitalik20102010@meta.ua vitalik20102010@meta.ua 28.03.2015 19:59:22

У меня вообще картинку не добавляет) что делать?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.