最近，我制作了一个HTML程序，它显示了一个地图，然后你点击了一个对象，程序会显示有关它的其他信息。
当我在我的编辑器中运行该程序时，一切正常（尝试），但是当我将程序上传到我的网站时，会向下移动并写入。我不知道为什么会这样。 https://www.cshark.info/our-tecnology# 这是我网站上的页面。我需要帮助解决这个问题。
谢谢！
在这里试试这个程序：
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
</head>
<body>
<p id="demo"></p>
<img src="https://techbrick.com/images/resources/2017/FLL2017-HydroDynamics-Mat-8in.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area class="PipeRemoval" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the broken pipe so it is completely in base. END OF THE MATCH: The broken pipe is completely in base. Points: 20';" alt="" title="" href="#" shape="rect" coords="588,241,738,333" />
<area class="Fountain" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the fountain’s middle layer rise some obvious height and stay there, due only to a big water in the gray tub. END OF THE MATCH: The fountain’s middle layer rises some obvious height and stays there. Points: 20';" alt="" title="" href="#" shape="poly" coords="455,499,445,506,439,514,438,522,441,527,445,531,450,535,454,538,454,540,454,548,453,553,454,559,454,566,458,568,465,569,473,568,481,568,488,568,489,561,489,553,488,544,488,539,494,537,498,535,503,531,506,525,507,520,504,513,503,509,496,503,491,500,488,498" />
<area class="PumpAddition" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the pump addition so it has contact with the mat and that contact is completely in the pump addition target. END OF THE MATCH: The pump addition has contact with the mat and that contact is completely in the pump addition target. Points: 20';" alt="" title="" href="#" shape="poly" coords="162,13,154,23,158,33,181,44,181,55,187,65,195,71,223,89,237,66,218,45" />
<area class="Flow" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move a big water (one time maximum) to the other team’s field only by turning the pump system’s valve(s). END OF THE MATCH: A big water is placed on the other team’s field. Points: 25';" alt="" title="" href="#" shape="rect" coords="41,2,137,29" />
<area class="Rain" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make at least one rain come out of the rain cloud. END OF THE MATCH: At least one rain came out of the rain cloud. Points: 20';" alt="" title="" href="#" shape="rect" coords="380,107,397,1" />
<area class="Filter" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the filter north until the lock latch drops. END OF THE MATCH: The lock latch of the filter has dropped. Points: 30';" alt="" title="" href="#" shape="rect" coords="310,188,382,222" />
<area class="WaterTreatment" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the water treatment model eject its big water, only by moving the toilet’s lever. END OF THE MATCH: The water treatment model ejected a big water. Points: 20';" alt="" title="" href="#" shape="rect" coords="372,235,454,299" />
<area class="Toilet" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the water treatment model eject its big water, only by moving the toilet’s lever. END OF THE MATCH: The water treatment model ejected a big water. Points: 20';" alt="" title="" href="#" shape="rect" coords="868,318,896,354" />
<area class="ManholeCovers" onclick="document.getElementById('demo').innerHTML = 'MISSION: Flip manhole cover(s) over, obviously past vertical without it/them ever reaching base. END OF THE MATCH: Manhole cover(s) flipped over, obviously past vertical. Points: 15 each cover. BONUS: Score manhole cover points as described above with both covers completely in its targets (the two big circles, see Fig. 3). Points: 30 added';" alt="" title="" href="#" shape="poly" coords="507,186,521,178,538,175,552,178,562,186,570,196,576,211,573,225,566,237,553,245,539,251,523,251,509,245,499,231,494,213,496,199" />
<area class="ManholeCovers" onclick="document.getElementById('demo').innerHTML = 'MISSION: Flip manhole cover(s) over, obviously past vertical without it/them ever reaching base. END OF THE MATCH: Manhole cover(s) flipped over, obviously past vertical. Points: 15 each cover. BONUS: Score manhole cover points as described above with both covers completely in its targets (the two big circles, see Fig. 3). Points: 30 added';" alt="" title="" href="#" shape="poly" coords="762,337,774,327,785,322,798,324,811,329,822,340,826,352,825,365,821,375,814,383,804,389,794,391,780,388,767,381,759,369,757,353" />
<area class="Tripod" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the inspection camera tripod. END OF THE MATCH: END OF THE MATCH: OPTION 1: The camera tripod is partly in either tripod target, with all of its feet touching the mat. Points: 15. OPTION 2: The camera tripod is completely in either tripod target, with all of its feet touching the mat. Points: 20';" alt="" title="" href="#" shape="poly" coords="104,327,78,347,81,364,122,366" />
<area class="PipeReplacement" onclick="document.getElementById('demo').innerHTML = 'Optional: Install first in base the optional loop on a blue pipe. MISSION: Replace the broken yellow pipe by a new blue pipe. END OF THE MATCH: The new blue pipe lies between both black pipes in full/flat contact (Fig. 6) with the mat. Points: 20';" alt="" title="" href="#" shape="rect" coords="135,492,155,448" />
<area class="PipeConstruction" onclick="document.getElementById('demo').innerHTML = 'Optional: Install first in base the optional loop on a blue pipe. MISSION: Move a new pipe. END OF THE MATCH: OPTION 1: Move a new pipe so it is partly in its target, in full/flat contact (see Fig. 6 in M10) with the mat. Points: 15. OPTION 2: Move a new pipe so it is completely in its target, in full/flat contact with the mat. Points: 20';" alt="" title="" href="#" shape="rect" coords="160,446,181,492" />
<area class="PipeConstruction" onclick="document.getElementById('demo').innerHTML = 'Optional: Install first in base the optional loop on a blue pipe. MISSION: Move a new pipe. END OF THE MATCH: OPTION 1: Move a new pipe so it is partly in its target, in full/flat contact (see Fig. 6 in M10) with the mat. Points: 15. OPTION 2: Move a new pipe so it is completely in its target, in full/flat contact with the mat. Points: 20';" alt="" title="" href="#" shape="rect" coords="587,1,735,20" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="718,218,748,230,727,238,705,231" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="915,248,938,234,908,218,890,233" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="894,270,908,256,929,270,918,282" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="910,294,924,287,948,301,933,307" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="979,329,955,312,948,316,955,323,951,328,960,340" />
<area class="Sludge" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the sludge so it is touching the visible wood of any of the six garden boxes. END OF THE MATCH: The Sludge touches the visible wood of any of the six garden boxes. Points: 30';" alt="" title="" href="#" shape="poly" coords="799,275,785,284,767,271,782,269" />
<area class="Flower" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the Flower rise some obvious height and stay there, due only to a big water in the brown pot. END OF THE MATCH: The Flower rises some obvious height and stays there. Points: 30. BONUS: Score flower points as described above with at least one rain in the purple part, touching nothing but the flower model. Points: 30 added';" alt="" title="" href="#" shape="poly" coords="866,249,859,240,850,236,842,238,835,243,832,247,830,254,819,255,812,260,805,260,803,253,794,251,786,250,780,254,778,261,780,265,787,269,798,271,811,267,815,271,824,274,831,276,836,283,846,287,854,287,862,281,865,275" />
<area class="WaterWell" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the water well so it has contact with the mat in it’s target. END OF THE MATCH: OPTION 1: The water well is moved so it has contact with the mat and that contact is partly in the water well target. Points: 15. OPTION 2: The water well is moved so it has contact with the mat and that contact is completely in the water well target. Points: 25';" alt="" title="" href="#" shape="poly" coords="119,406,159,394,169,427,128,441" />
<area class="Fire" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the fire drop only by making the firetruck apply direct force to the house’s yellow lever. END OF THE MATCH: The fire is dropped. Points: 25';" alt="" title="" href="#" shape="rect" coords="925,345,964,381" />
<area class="Fire" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the fire drop only by making the firetruck apply direct force to the house’s yellow lever. END OF THE MATCH: The fire is dropped. Points: 25';" alt="" title="" href="#" shape="rect" coords="962,79,993,125" />
<area class="WatterColection" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move or catch big water and/or rain water (one rain maximum; no dirty water) so it is touching the mat in the water target. The target may be moved. But the target mustn’t ever reach or cross the white off-limits line (the line also passes through under the ramp). Every water may be touching the target, and/or other water, but anything else. Each water model is scored as an individual. END OF THE MATCH: OPTION 1: At least one rain is in the target and touches the mat. Points: 10. OPTION 2: One or several big water(s) lie(s) in the target and touches the mat in it. Points: 10 EACH. BONUS: Score at least one big water in its target as described above with one on top, which is touching nothing but other water. Points: 30';" alt="" title="" href="#" shape="rect" coords="1153,48,1096,104" />
<area class="WatterColection" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move or catch big water and/or rain water (one rain maximum; no dirty water) so it is touching the mat in the water target. The target may be moved. But the target mustn’t ever reach or cross the white off-limits line (the line also passes through under the ramp). Every water may be touching the target, and/or other water, but anything else. Each water model is scored as an individual. END OF THE MATCH: OPTION 1: At least one rain is in the target and touches the mat. Points: 10. OPTION 2: One or several big water(s) lie(s) in the target and touches the mat in it. Points: 10 EACH. BONUS: Score at least one big water in its target as described above with one on top, which is touching nothing but other water. Points: 30';" alt="" title="" href="#" shape="rect" coords="233,492,184,534" />
<area class="SlingShot" onclick="document.getElementById('demo').innerHTML = 'MISSION: Move the slingshot so it is completely in its target. END OF THE MATCH: The slingshot it is completely in its target. Points: 20. BONUS: Score slingshot points as described above with the dirty water and a rain completely in the slingshot target. Points: 15';" alt="" title="" href="#" shape="rect" coords="187,439,212,466" />
<area class="Faucet" onclick="document.getElementById('demo').innerHTML = 'MISSION: Make the water level obviously more blue than white as seen from above the cup, only by turning the yellow faucet handle. END OF THE MATCH: The water level is obviously more blue than white as seen from above the cup. Points: 25';" alt="" title="" href="#" shape="poly" coords="1130,443,1094,463,1117,499,1101,516,1113,545,1163,516,1172,527,1190,517,1187,505,1198,500,1196,467,1170,471" />
[...]
</map>
</body>
</html>