这是CodePen
我正在尝试使用超原始javascript来使图像映射正常工作。
function redjawtext() {
document.getElementById("redjaw").innerHTML = "Jaw";
}
function redjawclear() {
document.getElementById("redjaw").innerHTML = "";
}
function rednecktext() {
document.getElementById("redneck").innerHTML = "Neck";
}
function redneckclear() {
document.getElementById("redneck").innerHTML = "";
}
function redmidbacktext() {
document.getElementById("redmidback").innerHTML = "Mid back";
}
function redmidbackclear() {
document.getElementById("redmidback").innerHTML = "";
}<div style="background: transparent url(http://www.briligg.com/images/posture600.png) no-repeat; display: block;
min-height: 413px; min-width: 550px; position: absolute; top: 50px;" width="550" height="413">
/*red jaw*/
<button type="button" class="map" style="width: 48px; height: 48px; top: 97px; left: 84px;" onclick="redjawtext(); redneckclear(); redmidbackclear();">
</button>
/*red neck*/
<button type="button" class="map" onclick="rednecktext(); redjawclear(); redmidbackclear();" style="width: 48px; height: 48px; top: 102px; left: 32px;"> </button>
/*red midback*/
<button type="button" id="redmidback" class="map" onclick="redmidbacktext(); redneckclear(); redjawclear();" style="width: 48px; height: 57px; top: 152px; left: 0px;"> </button>
<div id="redjaw" class="posture"></div>
<div id="redneck" class="posture"></div>
<div id="redmidback" class="posture"></div>
</div>与我在Chromium中进行测试时相比，CodePen中的代码行为有所不同。在CodePen中，关于redneck和redmidback的文本显示在错误的位置，在这两个地方，redmidback的文本都位于按钮内而不是div中。
我将在适当的时候学习正确地执行此操作，但现在我只想让此功能正常工作。希望我只是犯了一些简单的错误，并且我确实可以使用此非常基本的代码来使其工作。完成此操作时，每次onclick都必须调用13个函数。它适用于前两个。我是否缺少某些格式或其他内容？
该id = "redmidback"既是id的<button>（从中通过调用该函数onclick）和<div>（您想innerHTML进行设置）。由于该<button>元素<div>位于HTML中的之前，因此将设置找到的第一个元素。
始终使用唯一的id属性来避免此类问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句