[Demo] Change Image Source on Mouseover

[Demo] Change Image Source on Mouseover

by dshilkret

HTML

<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="rajkumar" class="imgh"></img></p>
<div id="foobar">
<div class="located-content js-help-content">
   
    <iframe id="iFrame1" width="100%" height="300"></iframe>
</div>





    

<!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->

<!--<iframe id="iFrame1" width="50%" height="300"></iframe>-->
</div>

CSS

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

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

JavaScript

$(document).ready(function () {
    $('.imgh')
        .mouseover(function () {
        $(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=");
        $('#foobar iframe').attr('src',doc1);
    })
        .mouseout(function () {
        $(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=");
         $('#foobar iframe').attr('src','');
    });


var doc1 =...