JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<img src="http://www.finishline.com/ca/landing/2_21_11/puma_01.jpg" usemap="#test">

<map name="test">
    <area id="pumaLogo" shape="rect" coords="0,10,100,50" href="http://www.finishline.com/store/shop/puma/_/N-1z141x0/Ne-5Z1sb8cZ1sb8vZ1sb97Z2/Ns-P_BestSellers%7C1?categoryId=cat300414&dim=Brand" />
    <area id="faasLogo" shape="circle" coords="80,180,90" href="http://www.finishline.com/store/shop/_/N-/Ns-P_BestSellers/Ntt-puma+faas?icid=400090" />
</map>

<div id="logoMessage">Buy the puma</div>
<div id="faasMessage">Buy the faas</div>

CSS

#logoMessage{
    width: 100px;
    height: 30px;
    background-color: #aaa;  
    position: absolute;
    top: 60px;
    left: 10px;
    display: none;
}

#faasMessage{
    width: 100px;
    height: 30px;
    background-color: #aaa;  
    position: absolute;
    top: 230px;
    left: 10px;
    display: none;   
}

JavaScript

$("#pumaLogo").bind({
    "mouseover": function(e) {
        $("#logoMessage").show();
    },
    "mouseout": function(e) {
        $("#logoMessage").hide();
    },
    "click": function(e) {
        //only use this if you don't want the click to take you anywhere
        e.preventDefault();
    }
});

$("#faasLogo").bind({
    "mouseover": function(e) {
        $("#faasMessage").show();
    },
    "mouseout": function(e) {
        $("#faasMessage").hide();
    },
    "click": function(e) {
        //only use this if you don't want the click to take you anywhere
        e.preventDefault();
    }
});