<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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

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

Ответить

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