Как менять картинку при наведении курсора мыши
Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример - это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.
Многие, конечно, будут делать это на 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
-
Создано 04.06.2012 12:53:28
-
Михаил Русаков
Комментарии (63):
Еще бы не помешало познакомиться с другими псевдоклассами. А также картинку можно менять и средствами JavaScript (событие Onmouseover="document.getElementById('imageID').src='путь к новой картинке'")
Ответить
Да, по псевдоклассам обязательно напишу статью в ближайшее время. А через JavaScript такие вещи делать не нужно, и данный способ (который Вы показали) применяется в других статьях.
Ответить
Через JS метод более извращенный и он хуже тем, что не у каждого пользователя включен JS.
Ответить
Ещё бы не помешало познакомиться со спрайтами и сэкономить на дополнительных картинках :)
Ответить
на js можно зделать более интересней смену картинок. хотя сам тоже пользуюсь css
Ответить
Все понятно доступно Спасибо за науку!
Ответить
Михаил! А как сделать, чтобы при наведении на кнопку она не сразу становилась красная к примеру, а медленно начинала краснеть!))) И тоже самое при отведении мыши от кнопки? Надо сделать к примеру в фотошопе gif анимацию и в css коде указать путь.gif так?
Ответить
Можно и так, а можно через JavaScript это сделать.
Ответить
На моём сайте все кнопки были сделаны при помощи js! Но как тут уже писали не у всех он включён! Переделал всё на css! Спасибо за ответ!
Ответить
Здравствуйте! Я ставлю тег <div> между тегом <a href>, чтобы при наведении курсора на ссылку менялась картинка. Проблема в том, что код становится невалидным, то есть тег <div> не может стоять на этом месте. Подскажите, пожалуйста, как можно исправить ситуацию.
Ответить
Туда нельзя поставить <div> в любом случае. Всё, что можно сделать - поставить туда <span>
Ответить
Большое спасибо!
Ответить
Так, а при span ни картинки, ни ссылки не отображаются. Что делать?
Ответить
span не вместо <a>. Имелось в виду что только <span> можно внутрь добавить, а тот же <div> нельзя.
Ответить
Я именно так и делаю - ничего не отображает. Вот код: <a href="index.html" title="Новости"><span class="img1"></span></a>. Что-то написано неверно?
Ответить
Сам текст ссылки должен быть какой-нибудь. <a href="1.html"><span>Ссылка 1</span></a> title это только всплывающая подсказка.
Ответить
К сожалению, это не подойдет. Я пыталась так сделать, но получилась полнейшая чушь. Мне нужна ссылка картинкой, которая притом меняется при наведении на нее курсора. А так получается, что она вместе с текстом, который совершенно не нужен. Пробовала вставить картинку - та же ситуация. Я не знаю, может быть есть какой-нибудь другой способ, кроме java? Или проще оставить дивы? Я смотрела в разных браузерах, все отображается корректно, за исключением ie. Но и там, разве что картинка не меняется. Может быть, это не сильно страшно - для одного-то браузера...
Ответить
Если не сильно страдает кроссбраузерность, можете и оставить как есть.
Ответить
Михаил, подскажите пожалуйста. вот учебный сайт http://spiceboxes.ru/test-s/ Я хочу, чтобы при наведении курсора на пункты меню, они меняли цвет. но получается только рамка при наведении курсора. и еще. я прописывала hover для всех тегов "а", но такой эффект только на верхнем меню получается, для ссылок в футере это не работает (и не надо, чтоб работало, но странно, что так получается). в чем ошибки?
Ответить
Не работает потому, что неправильно прописываете селекторы для hover, поэтому видно только рамку внешнего элемента, или вообще не срабатывает.
Ответить
в чем неправильно. вроде все как положено
Ответить
Если работает, отлично. А если не получается задавать сразу, то проще всего менять свойства в firebug, чтобы сразу видеть результат.
Ответить
Здравствуйте Михаил. При кодировке текста сайта создаю ссылки в шапке сайта с переходом на разделы текста на этой же странице с помощью фотографий. Как сделать ссылками эти же фото, но уже на другой странице с переходом не просто на предыдущую страницу, а на эти же якоря в текстах?
Ответить
Не понял вопроса.
Ответить
Извините. Вопрос: Как сделать ссылку, чтобы она открывала другую страницу, но не просто страницу, а определённый текст на этой странице? И ещё, как прикрепить свой аватар в наших комментариях?
Ответить
Понял, очень просто: <div id="text">Нужный текст</div> А ссылка должна быть такой: <a href="page.html#text">Ссылка</a>
Ответить
Большое спасибо. А как задавать свой аватар в различных комментариях? Просто обязывает мой возраст.
Ответить
В каких комментариях?
Ответить
Например, я пишу этот коммент. И вместо моего аватара написано, "аватар не задан", а у Вас ваше фото и имя.
Ответить
В пользовательском меню перейдите по ссылке: "Редактировать профиль". Там Вы сможете загрузить аватар.
Ответить
Здравствуйте Михаил, ещё раз прошу о помощи. По вашему совету делаю так: <div id="text">Кожа+ Плёнка пхв (2 л. мет.)</div> — это прямо в тексте на одной странице. А это ссылка на неё с другой страницы: <a href="page.html#text"><img src="http://porog.at.ua/vinil1.jpg" height="190px"></a> Не получается сделать ссылку с одной страницы на другую в соответствующее место текста. При переходе появляется страница с 404 ошибка.
Ответить
page.html - это пример названия страницы, у Вас она может быть index.html, about.html или page_1.html. Вы должны его заменить на своё название, тогда и не будет 404.
Ответить
Как я не догадался! Спасибо за науку. Буду продолжать изучение вашего курса "Создание сайта от А до Я" Ваша отзывчивость и готовность помочь вызывает особое уважение.
Ответить
Михаил, можете все-таки прояснить ситуацию, как сделать картинку, которая меняется, ссылкой? Если я пишу: <div class="img"><a href="http://index.html" title="Подсказка."></a></div>, то меняется только картинка, а ссылки нет. Если же наоборот поставить <div> внутрь <a>, то код не валидный. В итоге, картинка меняется, а как сделать ссылку на этой картинке? Спасибо.
Ответить
Можно сделать "a" блочным элементом, display: block; А затем задавать ему background в виде картинки, при a:hover background ставить другой.
Ответить
Михаил, я сделал так. Теперь ссылка есть, но вторая картинка не появляется. .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; }
Ответить
И еще появился интересный эффект. Когда на картинку нажимаю, то она продавливается. Т.е. как если бы я нажимал на кнопку. :-)))
Ответить
Не img:hover, а a:hover.
Ответить
Здравствуйте,Михаил! Подскажите, пож-та, как сделать , что бы при наведении мышкой на fancy-картинку появлялся бы темный фон с текстом? находила варианты в инете, но то ли они с fancy не совместимы, то ли еще что, но не получилось сделать такой эффект. Заранее,спасибо! fancy - когда при нажатии на картинку она увеличивается и дальше можно смотреть другие картинки.
Ответить
http://myrusakov.ru/css-window-dark.html - за основу возьмите это.
Ответить
это уже сделано - окно появляется при клике на картинку. А как сделать что ыб при наведении (hover) появлялся бы текст?
Ответить
Чтобы появился какой-то текст, нужно уже использовать JS и обработчик события onmouseover.
Ответить
понятно, спасибо.Я думала можно сделать с помощью css.
Ответить
Не отображается все равно div, объясните по сильнее с высотой и шириной
Ответить
Скорее всего, дело в неправильном пути к изображению.
Ответить
Проверьте пожалуйста мой код) ну схема такая создал файл с расширением ксс указал к нему путь через линк в хеде <link href="что-то).css" rel="stylesheet" type="text/css" /> картинки попридумывал указал ширину высоту как в картинке,но <div class="img"></div> просто так не робит) в тэге если вставляю что тогда появляется картинка, по другому не отображается див
Ответить
Опять же и здесь может быть ошибка в href. Используйте firebug.
Ответить
Прекрасно ссылается хриф, если код выглядит так <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; } и тут вроде норм указал или нет?
Ответить
Пробелы нельзя использовать в названии изображений. И путь, если файл стилей лежит не в той же директории, что изображение, должен быть совсем иным.
Ответить
Ооо мужик) не понял ничего, все файлы и картинки в одной папке лежат, я же не шарю в этом пытаюсь этот урок пройти научиться и Нуль) причем с красной рамкой отлично прошелся урок) а тут с этим div не могу. Уж слишком руки кривые) поломай чуть голову ппожалуйста) и объясни по доходчивее
Ответить
Михаил, подскажи, пожалуйста. Целый день бьюсь над этой сменой картинки в меню, а ничего не выходит. Вот пример: <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) не появляется при наведении мыши.
Ответить
Возможно, путь к картинке указан неверно. И ещё непонятно, зачем указывать фон у p, а затем у a:hover, надо указывать и там, и там <p>, либо <a>.
Ответить
Путь указан верно. Проверял несколько раз. Последний раз, чтобы уже наверняка, указал местонахождение файла через контекстное меню Dreamweaver. Указывал фон и только для Р: #menu p{}...#menu p: hover{}, и только для А: #menu a{}...#menu a: hover{}, изменений нет.
Ответить
http://myrusakov.ru/html-dreamweaver.html, а пользоваться нужно firebug для проверки правильный путь или нет, подключаются стили или нет.
Ответить
нашел ответ: ошибка всего в одном пробеле #menu p: hover. Исправил на #menu p:hover и все заработало
Ответить
Михаил прошу прощения что отвлекаю. Скажите пожалуйста Как сделать кнопку в меню? Картинкой. Я делаю так: <a fref = "index.html><img src = "картинка.jpg" alt = "главная">Как сделать чтоб картинка менялась в данном случае? И если можно совет как делают кнопки нормальные люди (я смотрел другие сайты и ваш исходный код и никто не делает как я).
Ответить
Так и делайте, блоком, как в этой статье.
Ответить
михаил здравствуй.можно этот урок подро бнее описать?голову сломал но ничего не получается.картинка появляется сзади первой (т е только ее край виден)и без красной границы.пути указаны правильно background: url("images/jj.jpg") no-repeat; но все равно ничего не выходит.заранее спасибо
Ответить
Возможно, неправильно указаны height и width картинок. Они явно будут другие, а не как в статье.
Ответить
Михаил, что здесь не так, провозился весь вечер и не получилось. Я залил фото в библиотеку, взял оттуда ссылку, все по размеру, но картинок не видно, только текст вместо их. Вот код <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/ Спасибо за Ваши статьи, уже многому научился.
Ответить
очень красиво получилось.. и элегантно) Спасибо
Ответить
Все прекрасно работает, но с одной картинкой, мне надо в ряд 4, и когда я хочу сделать то же самое со второй то картинка просто не меняется, попробовал js, проблема такая же. Подскажите пожалуйста что я делаю не правильно?
Ответить
У меня вообще картинку не добавляет) что делать?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.