Как менть картинку при наведении?

Question

[akgndkut]

Как сделать, чтобы при наведении на изображение появлялось другое? Нужно, чтобы это работало именно с тегом img.

Answer 1

[weranda]

1) У тега IMG есть два аттрибута: onmouseover и onmouseout.

2) JS

$('#myImage').hover(
    function(){
      $(this).attr('src','URL')
    },
    function(){
      $(this).attr('src','URL')
    }
)

Answer 2

[tigra]

https://jsfiddle.net/tigroid3/57s3cvnc/

Comments

[akgndkut]

я использую ее fotorama.io, но она лишь убирает фотографию, а не меняет ее, поможешь?

[tigra]

akgndkut: не понял вопроса. надо чтобы она плавно исчезала а другая плавно появлялась как в этой галерее?

[akgndkut]

нет, надо, чтобы при наведении на первую фотографию появлялась вторая, но уже третья шла как следующая, здесь пара фоток для виду как одна, у фоторамы юзается лишь тег img, вот и разбираюсь

[akgndkut]

tigra: ничего не придумали?

[tigra]

akgndkut: неа, именно с этим скриптом хз, лучше поискать готовое решение, галерей полно

Answer 3

[Дима Паутов]

Если использовать онли картинки, то это жопошный вариант, но если так хочется, то:

<div>
<img scr="img.png" class="img1">
<img scr="img.png" class="img2" hidden>
</div>

div:hover .img1 {
display: none;
}

div:hover .img2 {
display: block;
}