Whitch program is for me?

<!DOCTYPE html>

<html>

<head>

<script>

 

// stores the device context of the canvas we use to draw the outlines

// initialized in myInit, used in myHover and myLeave

var hdc;

 

// shorthand func

function byId(e){return document.getElementById(e);}

 

// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"

// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.

function drawPoly(coOrdStr)

{

    var mCoords = coOrdStr.split(",");

    var i, n;

    n = mCoords.length;

 

    hdc.beginPath();

    hdc.moveTo(mCoords[0], mCoords[1]);

    for (i=2; i<n; i+=2)

    {

        hdc.lineTo(mCoords[i], mCoords[i+1]);

    }

    hdc.lineTo(mCoords[0], mCoords[1]);

    hdc.stroke();

}

 

function drawRect(coOrdStr)

{

    var mCoords = coOrdStr.split(",");

    var top, left, bot, right;

    left = mCoords[0];

    top = mCoords[1];

    right = mCoords[2];

    bot = mCoords[3];

    hdc.strokeRect(left,top,right-left,bot-top); 

}

 

function myHover(element)

{

    var hoveredElement = element;

    var coordStr = element.getAttribute("coords");

    var areaType = element.getAttribute("shape");

 

    switch (areaType)

    {

        case "polygon":

        case "poly":

            drawPoly(coordStr);

            break;

case "circle":

drawCircle(coordStr);

        case "rect":

            drawRect(coordStr);

    }

}

 function drawCircle(coordSrt)

    {

        var coord = coordSrt.split(",");

 

        var c = document.getElementById("myCanvas");

        var hdc = c.getContext("2d");

        hdc.beginPath();

 

        hdc.arc(coord[0], coord[1], coord[2], 0, 2 * Math.PI);

        hdc.stroke();

    }

function myLeave()

{

    var canvas = byId("myCanvas");

    hdc.clearRect(0, 0, canvas.width, canvas.height);

}

 

function myInit()

{

    // get the target image

    var img = byId("img-imgmap201293016112");

 

    var x,y, w,h;

 

    // get it"s position and width+height

    x = img.offsetLeft;

    y = img.offsetTop;

    w = img.clientWidth;

    h = img.clientHeight;

 

    // move the canvas, so it"s contained by the same parent as the image

    var imgParent = img.parentNode;

    var can = byId("myCanvas");

    imgParent.appendChild(can);

 

    // place the canvas in front of the image

    can.style.zIndex = 1;

 

    // position it over the image

    can.style.left = x+"px";

    can.style.top = y+"px";

 

    // make same size as the image

    can.setAttribute("width", w+"px");

    can.setAttribute("height", h+"px");

 

    // get it"s context

    hdc = can.getContext("2d");

 

    // set the "default" values for the colour/width of fill/stroke operations

    hdc.fillStyle = "red";

    hdc.strokeStyle = "red";

    hdc.lineWidth = 3;

}

</script>

 

<style>

* {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

body

{

    background-color: inherit;

}

canvas

{

    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */

    position: absolute;

}

 

</style>

 

<title></title>

</head>

<body onload="myInit()">

<h1 style="text-align: center;">Show us where is your pain!</h1>

<p style="text-align: center;">Mouse pointer will activate a link,<br> click on it if you are in the painfull region.</p>

<p style="font-size:12px; text-align:center;">If your screen is not enough wide, you can scroll left and right.</p>

    <canvas id="myCanvas"></canvas>     <!-- gets re-positioned in myInit(); -->

<center>

<img src="https://media.playreha.com/pictures/3032_0_600_0.jpg" usemap="#imgmap_css_container_imgmap201293016112" class="imgmap_css_container" title="" alt="" id="img-imgmap201293016112" style="max-width : 600px;"/>

<map id="imgmap201293016112" name="imgmap_css_container_imgmap201293016112">

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="132,407,30" href="https://playreha.com/en/category/knee-joint_ci3" alt="Knee" title="Knee" class="imgmap201293016112-area" id="imgmap201293016112-area-0" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="121,281,40" href="https://playreha.com/en/category/hip-joint_ci27" alt="Hip joint" title="Hip joint" class="imgmap201293016112-area" id="imgmap201293016112-area-1" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="67,332,50" href="https://playreha.com/en/category/thigh_ci28" alt="Thigh" title="Thigh" class="imgmap201293016112-area" id="imgmap201293016112-area-2" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="69,537,23" href="https://playreha.com/en/category/ankle-and-foot_ci23" alt="Ankle" title="Ankle" class="imgmap201293016112-area" id="imgmap201293016112-area-3" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="308,557,38" href="https://playreha.com/en/category/ankle-and-foot_ci23" alt="Foot" title="Foot" class="imgmap201293016112-area" id="imgmap201293016112-area-4" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="46,139,33" href="https://playreha.com/en/category/shoulder-joint_ci33" alt="Shoulder" title="Shoulder" class="imgmap201293016112-area" id="imgmap201293016112-area-5" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="330,212,31" href="https://playreha.com/en/category/elbow-joint_ci34" alt="Elbow" title="Elbow" class="imgmap201293016112-area" id="imgmap201293016112-area-6" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="493,226,34" href="https://playreha.com/en/category/spine-and-torso_ci4" alt="Lower back" title="Lower back" class="imgmap201293016112-area" id="imgmap201293016112-area-7" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="492,142,49" href="https://playreha.com/en/category/spine-and-torso_ci4" alt="Back" title="Back" class="imgmap201293016112-area" id="imgmap201293016112-area-8" />

    <area shape="rect" onmouseover="myHover(this);" onmouseout="myLeave();" coords="440,259,545,311" href="https://playreha.com/en/category/pelvis_ci26" alt="Pelvis" title="Pelvis" class="imgmap201293016112-area" id="imgmap201293016112-area-9" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="317,323,35" href="https://playreha.com/en/category/wrist-joint_ci35" alt="Hand and Wrist" title="Hand and Wrist" class="imgmap201293016112-area" id="imgmap201293016112-area-10" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="528,450,49" href="https://playreha.com/en/category/ankle-and-foot_ci23" alt="Calf" title="Calf" class="imgmap201293016112-area" id="imgmap201293016112-area-11" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="461,527,25" href="https://playreha.com/en/category/ankle-and-foot_ci23" alt="Achilis tendon" title="Achilis tendon" class="imgmap201293016112-area" id="imgmap201293016112-area-12" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="300,402,34" href="https://playreha.com/en/category/knee-joint_ci3" alt="Knee" title="Knee" class="imgmap201293016112-area" id="imgmap201293016112-area-13" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="320,129,26" href="https://playreha.com/en/category/shoulder-joint_ci33" alt="Shoulder" title="Shoulder" class="imgmap201293016112-area" id="imgmap201293016112-area-14" />

    <area shape="circle" onmouseover="myHover(this);" onmouseout="myLeave();" coords="181,250,43" href="https://playreha.com/en/category/elbow-joint_ci34" alt="Forearm" title="Forearm" class="imgmap201293016112-area" id="imgmap201293016112-area-15" />

   

</map>

</center>

 

</body>

</html>

 0