JSFiddle - React, Tailwind, and code Playground

by michelejs

HTML

<h3>Hover over the pictures.</h3>
<div id="profPhotos">
    <a class="profPhotoLink">
        <img src="http://media32.onsugar.com/files/2011/08/34/5/1888/18883920/e56bad3242e65243_puppies_B.jpg">    
    </a>
    <a class="profPhotoLink">
        <img src="http://www.pluspets.net/wp-content/uploads/2010/07/Cutest-Puppies1.jpg">
    </a>
    <a class="profPhotoLink">
        <img src="http://images.paraorkut.com/img/pics/images/p/puppies-7164.jpg">
    </a>
</div>

CSS

img {
    width: 200px;
    margin: 1ex;
}
p {font-size: 60%;}

JavaScript

$('#profPhotos .profPhotoLink > img').bind (
    "mouseenter mouseleave", myImageHover
);

function myImageHover (zEvent) {

    if (zEvent.type == 'mouseenter') {
        StatRep ('Entering src: ' + this.src);
    }
    else {
        StatRep ('Leaving src: ' + this.src);
    }
}

function StatRep (sMess) {
    $("body").append ('<p>' + sMess + '</p>');
}