0
我模仿标记区域悬停通过js和我创建了每个区域的js函数。所以，你可以看到，Rect地区（bolshevism）被描绘成了一片，但是保利地区（乌托邦社会主义）只有一个轮廓。帆布聚合区域未被绘制
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.fillRect(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 'rect':
drawRect(coordStr);
break;
}
}
function myLeave()
{
var canvas = byId('myCanvas');
hdc.clearRect(0, 0, canvas.width, canvas.height);
}
function myInit()
{
// get the target image
var img = byId('main');
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
//alert(x + " " + y + " " + w + " " + h);
// 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 = "rgba(230,236,247,0.5)";
hdc.strokeStyle = "rgba(230,236,247,0.5)";
hdc.lineWidth = 2;
}.menu {
position: fixed; /* Фиксированное положение */
right: 50px; /* Расстояние от правого края окна браузера */
top: 90%; /* Расстояние сверху */
}
#back_1 {
\t background-color: #cecece;
\t height: 720px;
\t margin: 0px auto;
\t text-align: center;
}
#main {
\t width: 700px;
\t height: 700px;
\t line-height: 0;
\t border: none;
}
#bolshevism {
\t height: 300px;
\t background-color: #b30106;
}
.text_1 {
\t width: 1200px;
\t padding-top: 70px;
\t margin: 0px auto;
\t text-align: left;
\t
}
.text_2 {
\t width: 1200px;
\t padding-top: 70px;
\t margin: 0px auto;
\t text-align: right;
}
#utopian_socialism {
\t background-color: #eb3913;height: 330px;
}
#myCanvas {
\t position: absolute;
\t pointer-events:none;
}<html xmlns="http://www.w3.org/1999/xhtml">
\t <head>
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\t \t <title>Political Spectrum</title>
\t \t <link href="css/style.css" type="text/css" rel="stylesheet" />
\t \t <link rel="stylesheet" href="css/font-awesome.min.css">
\t \t <script type="text/javascript" src="js/jquery.min.js"></script>
\t \t <script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
\t \t <script type="text/javascript" src="js/jquery.localScroll.min.js"></script>
\t \t <script type="text/javascript" src="js/main.js"></script>
\t </head>
\t <body onload="myInit()">
\t <canvas id='myCanvas'></canvas>
\t \t <div id="back_1">
\t \t <map name="map"><a id="picture"></a>
\t \t \t <img src="http://i.imgur.com/Vk1e2hW.png" id="main" usemap="#map"ismap>
\t \t \t <div>
<area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,130" alt="Bolshevism">
<area href="#utopian_socialism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="poly" coords="59,466,172,466,172,590,139,590,139,599,59,599" alt="Social Democracy">
<div id="bolshevism" class="authoritarian">
\t \t \t <div class="text_1">
\t \t \t \t <a id="bolshevism_1"><p class="head">BOLSHEVISM</p></a>
\t \t \t \t <img src="images/line.png"class="line"/>
\t \t \t \t <p class="descriprion">Bolshevism is the term used to describe the beliefs and practices of the Bolsheviks, the members of a political movement in Russia during the early 20th century. Bolsheviks were a faction of the Marxist Russian Social Democratic Labour Party (RSDLP) which split apart from the Menshevik faction at the Second Party Congress in 1903. The RSDLP was a revolutionary socialist political party formed in 1898 in Minsk in Belarus to unite the various revolutionary organisations of the Russian Empire into one party.</p>
\t \t \t \t <p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Bolsheviks" target="_blank">Bolshevism</a></span></p>
\t \t \t </div>
\t \t </div>
<div id="utopian_socialism" class="authoritarian">
\t \t \t <div class="text_1">
\t \t \t \t <a id="utopian_socialism_1"><p class="head">UTOPIAN SOCIALISM</p></a>
\t \t \t \t <img src="images/line.png"class="line"/>
\t \t \t \t <p class="descriprion">Utopian socialism is a label used to define the first currents of modern socialist thought as exemplified by the work of Henri de Saint-Simon, Charles Fourier, Étienne Cabet, and Robert Owen. Utopian socialism is often described as the presentation of visions and outlines for imaginary or futuristic ideal societies, with positive ideals being the main reason for moving society in such a direction. Later socialists and critics of utopian socialism viewed "utopian socialism" as not being grounded in actual material conditions of existing society, and in some cases, as reactionary. These visions of ideal societies competed with Marxist-inspired revolutionary social democratic movements.<span class="link"><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">[wiki]</a></span></p>
\t \t \t \t <p class="link"><i class="fa fa-wikipedia-w" aria-hidden="true"></i><span><a href="https://en.wikipedia.org/wiki/Utopian_socialism" target="_blank">Utopian Socialism</a></span></p>
\t \t \t </div>
\t \t </div>
</body>
</html>
非常感谢你 – ectuser