[Demo] Change Image Source on Mouseover

[Demo] Change Image Source on Mouseover

by dshilkret

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="js-show-help"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHjSURBVFhH7ZXLSwJRFIf939q0S4mMIINQCHEXQuAyUHAR0TKRcOEiaR22iTZFyeSYPZTSjCwTK/JFlo/mF/dyKYQWk3Pu4GI+OCDneO/54HLm2CxkcTwxAao4mZw8FNfSwS6mgN2jzs5q5JKUgr10ml6SUhDX1/SS1ILkkjIESSVlCZJJyhQkkZQtyMKQJKWgnhBt9cMOmYUlyCitr+N0Zgaf1arI6Ee6YL/VgmK34z4SwWM8LrL6kS/YbEJxOFDe2hpPQYY6N4fzpSW8HR2JjH5MESyEQrxRr9EQGf2YIlhJJHijUTBFsByN8kZjOcUMdX4eD7EYiuGwyOhHumBDVZHz+wFN44PSzudFRR/SBfMrK6grCv/durxExuVC/x/DIlXw/e4OWY8H2mCA92IRL/v7UKameNN8IICb1VU+4ZXtbXzWauLUMNIE2QZh/2PBNsm514vSxgaednaQdjp5/nlvj38b7zc3cba4KE4OQy74UamgEAz+yNVTKQw6HVH9pba7y/czE7/w+XC1vCwqw5AKNjMZnE5P43Ztja+3TrksKn+j9ft8aNq5HL66XZEdhlQws7CAWjKJrNuN14MDkTUGqSB7WvZs7PmoIBWUgSVoFEvQKJagUUYWNDNEWwtibLZvQEXZRq+VyIMAAAAASUVORK5CYII=" alt="PDF File" class="pdfICO"></p>
<div id="iFrameContainer">
<div class="located-content js-help-content">   
    <iframe id="iFrame1" width="100%" height="300"></iframe>
</div>

</div>

CSS

body {
    font-family: Calibri, sans-serif;
}

div {
    
    padding: 10px;
}
.located-content {
    padding: 5px;
    
    color: white;
}

JavaScript

$(document).ready(function () {
    $('.pdfICO')
        .mouseover(function () {
        $('.js-help-content').fadeToggle(200);
        $(this).attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHjSURBVFhH7ZXLSwJRFIf939q0S4mMIINQCHEXQuAyUHAR0TKRcOEiaR22iTZFyeSYPZTSjCwTK/JFlo/mF/dyKYQWk3Pu4GI+OCDneO/54HLm2CxkcTwxAao4mZw8FNfSwS6mgN2jzs5q5JKUgr10ml6SUhDX1/SS1ILkkjIESSVlCZJJyhQkkZQtyMKQJKWgnhBt9cMOmYUlyCitr+N0Zgaf1arI6Ee6YL/VgmK34z4SwWM8LrL6kS/YbEJxOFDe2hpPQYY6N4fzpSW8HR2JjH5MESyEQrxRr9EQGf2YIlhJJHijUTBFsByN8kZjOcUMdX4eD7EYiuGwyOhHumBDVZHz+wFN44PSzudFRR/SBfMrK6grCv/durxExuVC/x/DIlXw/e4OWY8H2mCA92IRL/v7UKameNN8IICb1VU+4ZXtbXzWauLUMNIE2QZh/2PBNsm514vSxgaednaQdjp5/nlvj38b7zc3cba4KE4OQy74UamgEAz+yNVTKQw6HVH9pba7y/czE7/w+XC1vCwqw5AKNjMZnE5P43Ztja+3TrksKn+j9ft8aNq5HL66XZEdhlQws7CAWjKJrNuN14MDkTUGqSB7WvZs7PmoIBWUgSVoFEvQKJagUUYWNDNEWwtibLZvQEXZRq+VyIMAAAAASUVORK5CYII=");
        $('#iFrameContainer iframe').attr('src',doc1);
    })
        .mouseout(function () {
        $('.js-help-content').fadeOut(200);
        $('#iFrameContainer  iframe').attr('src','');
    });


var doc1 = "https://convserv-dev.eastus2.cloudapp.azure.com/Render/View?Path=C:\\dev\\data\\49691641-SPRDL115D0034.PDF&pagenumber=1&parse=True&template=~%2Ffiles/%2FPreviewer%2Fviews%2Fviewer.cshtml";
var doc2 = "https://convserv-dev.eastus2.cloudapp.azure.com/Render/View?Path=C:\\dev\\data\\54199715-SPE7M516M9036.PDF&pagenumber=1&parse=True&template=~%2Ffiles/%2FPreviewer%2Fviews%2Fviewer.cshtml";
//document.getElementById('iFrame1').src=doc1;

$('.js-help-content').hide();

$('.js-show-help').click(function(e){
    e.stopPropagation();
    $('.js-help-content').fadeToggle(200);
});
$('.js-help-content').click(function(e){
    e.stopPropagation();
});
$(document).click(function(){
     $('.js-help-content').fadeOut(200);
});

});