Я хочу научиться делать следующее: вот у меня есть картинка image1
и, если на неё навели курсор, то она меняется на image2
. Как это реализовать?
7 ответов
img{
max-width: 100%;
}
.wrapper-img{
position: relative;
max-width: 300px;
}
.wrapper-img .img-hide{
opacity: 0;
}
.wrapper-img:hover .img-hide{
opacity: 1;
position: absolute; top: 0; left: 0;
transition: all 0.5s ease-in-out;
}
<div class="wrapper-img">
<img src="http://cs304807.vk.me/v304807597/365a/TPcDNnItHrw.jpg" alt="" />
<img class="img-hide" src="http://cs416726.vk.me/v416726759/3384/dU3iWhgVsus.jpg" alt="" />
</div>
-
Вопрос древний, автор не заходил с 11-го года, это не JS, как просил автор. Зачем тогда ответил?– user3168824 апр 2015 в 14:36
Мне кажется, что лучше css псевдокласс hover
. http://www.xiper.net/collect/html-and-css-tricks/content/img-hover.html
А можно на Jquery
$('img.class').hover(
function { $('img.destination').attr('src', 'адрес картинки'); }, //<тут меняем картинку
function { $('img.destination').attr('src', 'адрес картинки'); } //<тут меняем картинку обратно(то есть когда курсор мыши уходит за пределы img.class)
);
-
-
1Вы действительно думаете что я незнаю что такое пседоклассы?<br><br> Тем не менее - прошу прощения, я думал вы написали этот комментарий к js коду, вот и возмутился ^^– user354526 окт 2011 в 21:14
-
Плюсы использования этого метода? IMHO Эффект тот же что и обычный :hover css-овский . <a href="htmlbook.ru">Черпайте отсюда</a>– Goldy27 окт 2011 в 6:33
На мой взгляд лучше использовать чистый CSS или технологию rollover: Пример
П.С. обновил ссылку, фидл как всегда глючит
-
Любопытно - покажите мне пожалуйста эти волшебные строки которые поменяют <b>src</b> изображения?– user354526 окт 2011 в 21:07
-
Дивы не лишние, там всего два дива. В первом используется ролловер эффект, когда картинка больше, чем див. А показываем мы только нужную часть картинки, в зависимости от состояния. А во втором случае, полностью меняется и картинка и размер дива. 26 окт 2011 в 21:14
Присоединяюсь что-бы сделать все на CSS
Все зависит от того в каком это будет контексте, так например для меню или чего-то подобного то: http://jsfiddle.net/szVm4/1/ - из улучшений - можно собрать картинки в спрайт и менять их с помощью background-position
Если действия при нажатии не происходит, то можно сделать примерно так: http://jsfiddle.net/szVm4/2/
<div class="image"></div>
<style type="text/css">
.image {
background-image:url(path/to/image);
background-repeat:no-repeat;
width:100px;
height:100px;
}
.image:hover {
тут все тоже самое только для 2-ой картинки
}
</style>
Вроде так )
Более простой вариант:
<a href="#"
onMouseOver="document.getElementByid('test').src='test_2.png'"
onMouseOut="document.getElementByid('test').src='test_1.png'">
<img id="test" href="test_1.png" align="left"></a>
если это картинка (img) то это нужно делать на JS
onmove - this.src="image2.jpg"
onblur - this.src="image1.jpg"
-
1А примеч тут onblur? O_o<br> Какой ужас ^^<br> Может всетаки <b>onmouseover</b> И <b>onmouseout</b>, не?– user354526 окт 2011 в 20:28