Image HotSpots

by David Kyle

HTML

<img src="http://www.summitracing.com/images/expert-advice-professor.gif" alt="Professor" id="professor" />
<div class="floater">Testing</div>
<div class="hot-spots"></div>

CSS

.floater {
    border: solid 1px #000000;
    padding: 3px;
    background-color: white;
    width: 200px;
    height: 50px;
    display: none;
    position: absolute;
    border-radius: 5px;
}
.hotspot {
    background-image: url('http://wcdn3.dataknet.com/static/resources/icons/set1/a947bd4c99c9.png');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    position: absolute;
    z-index: 20;
    opacity: .5;
}

JavaScript

var HotSpot = function (varTop, left, width, height, dataItem) {
    return {
        Boundary: {
            Top: varTop,
            Left: left,
            Width: width,
            Height: height
        },
        HitTest: function (x, y) {
            if (x > this.Boundary.Left && x <= (this.Boundary.Left + this.Boundary.Width)) {
                if (y > this.Boundary.Top && y <= (this.Boundary.Top + this.Boundary.Height)) {
                    return true;
                } else {
                    return false;
                } // end if/else
            } else {
                return false;
            } // end if/else
        }, Data : function() {
            for(var t=0;t<floatData.length;t++) {
                if(floatData[t].Id == dataItem) {
                    return floatData[t].Message;
                }
            } // end for loop
        }
    }
};
var floatData = [{Id: 1, Message: "Left Eye"}, {Id: 2, Message: "Right Eye"}];
$(function () {
    var hotSpots = new Array(new HotSpot(75, 55, 20, 20, 1), new HotSpot(72, 83, 20, 20, 2));
    //Add visual cues for hot-spots
    for(var i =0; i<hotSpots.length;i++) {
        $(".hot-spots").append("<span class='hotspot' style='top: " + hotSpots[i].Boundary.Top + "px; left: " + hotSpots[i].Boundary.Left + "px;'></span>");
    } // end for loop
    //Add event triggering for hot-spots
    $(".hotspot").on("mousemove", function (e) {
        var over = false;
        for (var i = 0; i < hotSpots.length; i++) {
            if (hotSpots[i].HitTest(event.x, event.y)) {
                over = true;
                $(".floater").text(hotSpots[i].Data());
                break;
            } else {
                over = false;
            }
        } // end for loop
        if (over == true) {
            if ($(".floater").css("display") == "block") {
                $(".floater").css("left", event.x + 10);
                $(".floater").css("top", event.y + 10);
            } else {
               ...