0
我模仿標籤區域懸停通過js。但是當將畫布放置在圖像上時，懸停會被阻止。但是，當我將它放在圖像下時，畫布內容不可見。 我爲每個區域創建js函數，當初始化頁面時，我將canvas放在圖像上。帆布塊區域懸停
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 = 'red';
hdc.strokeStyle = 'red';
hdc.lineWidth = 4;
}#back_1 {
\t background-color: #cecece;
\t height: 720px;
\t margin: 0px auto;
\t text-align: center;
}
#main {
\t width: 700px;
\t high: 700px;
\t line-height: 0;
\t border: none;
}
#bolshevism {
\t height: 300px;
\t background-color: #b30106;
}
.text_1 {
\t width: 1320px;
\t padding-top: 70px;
\t margin: 0px auto;
\t text-align: left;
\t
}
.head {
\t font: bold 40px Ubuntu-B;
}
.line {
\t width: 500px;
\t padding-top: 10px;
\t padding-bottom: 10px;
}
.descriprion{
\t font: 20px Ubuntu-B;
}
.text_2 {
\t width: 1320px;
\t padding-top: 70px;
\t margin: 0px auto;
\t text-align: right;
}
.authoritarian {
\t color: #ffffff;
}
#myCanvas {
\t position: absolute;
}<body onload="myInit()">
\t \t <canvas id='myCanvas'></canvas>
\t \t <div id="back_1">
\t \t \t <img src="http://i.imgur.com/XQ5KueE.png" id="main" usemap="#map"ismap>
\t \t \t <div>
\t \t \t \t <map name="map">
\t \t \t \t \t <area href="#bolshevism_1" onmouseover='myHover(this);' onmouseout='myLeave();' shape="rect" coords="59,55,105,128" alt="Bolshevism"> \t
\t \t \t \t </map>
\t \t \t </div>
</div>
<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 <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 </div>
\t \t </div>
</body>