5

Я хочу научиться делать следующее: вот у меня есть картинка image1 и, если на неё навели курсор, то она меняется на image2. Как это реализовать?

7 ответов 7

1

http://jsfiddle.net/1tvefvv3/

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>

1
  • Вопрос древний, автор не заходил с 11-го года, это не JS, как просил автор. Зачем тогда ответил?
    – user31688
    24 апр 2015 в 14:36
1

Мне кажется, что лучше 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)
);
3
  • бред у вас! прочитай про псевдоклассы!!!!
    – evgeniy
    26 окт 2011 в 21:07
  • 1
    Вы действительно думаете что я незнаю что такое пседоклассы?<br><br> Тем не менее - прошу прощения, я думал вы написали этот комментарий к js коду, вот и возмутился ^^
    – user3545
    26 окт 2011 в 21:14
  • Плюсы использования этого метода? IMHO Эффект тот же что и обычный :hover css-овский . <a href="htmlbook.ru">Черпайте отсюда</a>
    – Goldy
    27 окт 2011 в 6:33
0

На мой взгляд лучше использовать чистый CSS или технологию rollover: Пример

П.С. обновил ссылку, фидл как всегда глючит

2
  • Любопытно - покажите мне пожалуйста эти волшебные строки которые поменяют <b>src</b> изображения?
    – user3545
    26 окт 2011 в 21:07
  • Дивы не лишние, там всего два дива. В первом используется ролловер эффект, когда картинка больше, чем див. А показываем мы только нужную часть картинки, в зависимости от состояния. А во втором случае, полностью меняется и картинка и размер дива.
    – invincible
    26 окт 2011 в 21:14
0

Присоединяюсь что-бы сделать все на CSS

Все зависит от того в каком это будет контексте, так например для меню или чего-то подобного то: http://jsfiddle.net/szVm4/1/ - из улучшений - можно собрать картинки в спрайт и менять их с помощью background-position

Если действия при нажатии не происходит, то можно сделать примерно так: http://jsfiddle.net/szVm4/2/

0
<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>

Вроде так )

0

Более простой вариант:

<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>
-1

если это картинка (img) то это нужно делать на JS

onmove - this.src="image2.jpg"

onblur - this.src="image1.jpg"

1
  • 1
    А примеч тут onblur? O_o<br> Какой ужас ^^<br> Может всетаки <b>onmouseover</b> И <b>onmouseout</b>, не?
    – user3545
    26 окт 2011 в 20:28

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.