Übergang hinzufügen, während img src mit Javascript ändern

Question

Ich habe ein IMG-Tag, das ich die SRC ändern möchten, wenn Hover und alles funktioniert, aber ich möchte etwas Übergang hinzufügen, so dass es nicht so rau aussieht, aber da es ein IMG ist src ich kann es nicht mit css zielen.

http://jsfiddle.net/Ne5zw/1/

html

<img id="bg" src="img/img1.jpg"> 
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');"> 

js

function imgChange(im){ 
document.getElementById('bg').src=(im); 
} 

Answer 1

Sie wollen eine Überblendung. Grundsätzlich müssen Sie sich auf der jeweils anderen beiden Bilder positionieren, und legen Sie eine der opacity-0 so dass es versteckt wird:

<div id="container"> 
    <img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg"> 

    <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" /> 
</div> 

CSS:

.hidden{ 
opacity:0; 
} 

img{ 
    position:absolute; 
    opacity:1; 
    transition:opacity 0.5s linear; 
} 

Mit einem transition Satz für opacity auf die Bilder, alles, was wir tun müssen, ist es mit diesem Skript auslösen:

$(function(){ 
    debugger; 
    $(document).on('mouseenter', '#hoverMe', function(){ 
     $('img').toggleClass('hidden'); 
    }); 
}); 

http://jsfiddle.net/Ne5zw/12/

Answer 2

ich benutze normalerweise jquery für diese.

$(document).on("mouseover", '.image_class', function() { 
     $(this).attr('src', 'img/img2.jpg'); 
    }); 

$(document).on("mouseout", '.image_class', function() { 
     $(this).attr('src', 'img/img1.jpg'); 
    }); 

Answer 3

ist hier eine reine CSS-Lösung mit CSS transition. Sie können eine div als Container verwenden und die background-image auf Hover setzen.

.image-container { 
 
    background: url(http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png) center center no-repeat; 
 
    background-size: contain; 
 

 
    width: 150px; 
 
    height: 150px; 
 

 
    -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
.image-container:hover { 
 
    background-image: url("http://www.iconsdb.com/icons/preview/gray/stackoverflow-xxl.png"); 
 
}

<div class="image-container"></div>