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>
