Image swap with jQuery

a basic jQuery example

by dshilkret

HTML

<h1>Swap an image on hover</h1>

<div id="foobar">
    
<img src="http://macloo.com/images/african_animals/zebra.png" alt="An animal icon">

<iframe id="iFrame1" width="100%" height="600"></iframe>
</div>

CSS

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

div {
    background: #99ff66;
    padding: 10px;
}

JavaScript

// using jQuery 
$(document).ready(function(){




var lion = "http://macloo.com/images/african_animals/lion.png";
var zebra = "http://macloo.com/images/african_animals/zebra.png";

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;

$('#foobar').on('mouseenter mouseleave', function() {
    if ( $('#foobar img').attr('src') == lion ) {
        $('#foobar img').attr('src', zebra);
        $('#foobar iframe').attr('src',doc1);
    } else {
        $('#foobar img').attr('src', lion);
        $('#foobar iframe').attr('src',doc2);
    }
});
});
// note that "#foobar" refers to the div with that id, and when we
// write '#foobar img' - ANY image inside that div will be affected