JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div>
    
    
</div>

<p id="coords"></p>

<p id="location"></p>

CSS

div {
    background: url(http://www.roundwayparishcouncil.gov.uk/data/map2.jpg) no-repeat;
    width: 400px;
    height: 400px;
}

JavaScript

$('div').mousemove(function(e) {
    var coordsX = e.pageX;
    var coordsY = e.pageY; /*(((coordsX > 81) && (coordsX < 122)) && (coordsY == 333))    */
    if (((coordsX > 81) && (coordsX < 122)) && ((coordsY > 322) && (coordsY < 350))) {
        $('p#location').text("You are pointing your mouse over Yeovil");
    } else {
        $('p#location').text("Finding location");
    }

    $('p#coords').text(coordsX + " " + coordsY);
});