Javascript 图像贴图上方带有动画的div

我有以下项目：（忽略声音，它们将来不会自动播放）

我正在尝试从这个代码笔添加太阳：

我发现为了让sun在页面上显示，我需要在

之后添加它。问题是动态添加这个类

这是我需要在

之后插入的HTML代码

以下是页面的实际代码：

default:
            var htmlcode = '<img src="images/Intrare.jpg" usemap="#map" class="map full-img" width="1920px" height="1080px">';
            htmlcode += '<map name="map" id="map">';
            htmlcode += '<area shape="poly" coords="152,267,162,271,171,286,171,308,169,315,172,325,166,328,166,336,166,344,176,355,190,367,216,386,217,401,204,422,193,434,167,444,127,437,86,435,82,425,71,424,53,406,51,378,50,372,74,358,87,350,98,348,107,344,105,336,103,326,99,313,94,305,98,292,103,284,105,278,111,269,124,266,132,264" alt="" title="" data-toggle="modal" data-target="#myModal" class="highlight"/>';   
            htmlcode += '<area shape="poly" coords="511,393,517,397,521,406,522,411,522,417,522,420,520,423,522,427,522,431,520,434,520,438,519,442,521,447,528,453,534,458,547,466,553,473,552,480,542,496,530,505,521,508,504,505,493,504,477,502,469,503,466,495,459,495,451,488,447,479,446,465,444,462,457,453,470,447,481,443,481,437,479,429,477,425,475,416,476,407,483,398,493,392" alt="" title="" data-toggle="modal" data-target="#myModal"/>';     
            htmlcode += '<area shape="poly" coords="697,460,702,462,706,469,706,478,704,481,706,486,705,488,704,490,702,497,707,499,710,503,717,508,727,515,726,525,718,535,706,542,693,542,683,539,667,539,665,534,660,534,652,525,649,514,651,509,659,502,667,500,674,498,676,487,672,482,673,470,678,461,689,459" alt="" title="" data-toggle="modal" data-target="#myModal"/>'; 
            htmlcode += '<area shape="poly" coords="814,500,817,505,818,514,818,520,817,527,821,532,826,535,834,540,835,547,831,552,826,559,821,561,814,561,803,559,796,558,788,555,783,554,779,550,777,543,776,536,783,533,789,530,796,527,796,521,793,514,794,507,798,501,806,500" alt="" title="" data-toggle="modal" data-target="#myModal"/>'; 
            htmlcode += '<area data-group-id="group-1" shape="poly" coords="1168,676,1167,571,1171,564,1177,561,1185,559,1193,558,1204,560,1212,563,1216,567,1217,572,1218,677" onclick="zoomTo(4)" alt="" title=""/>'; 
            htmlcode += '<area data-group-id="group-1" shape="poly" coords="1257,676,1256,569,1259,565,1268,560,1278,558,1287,558,1293,559,1298,560,1304,564,1306,568,1307,677" onclick="zoomTo(4)"  alt="" title=""/>';    
            htmlcode += '<area shape="poly" coords="1037,647,1039,647,1043,647,1047,649,1049,652,1049,655,1048,659,1048,663,1046,665,1044,665,1042,668,1044,667,1050,665,1054,662,1056,661,1057,653,1059,648,1062,644,1067,643,1070,647,1071,652,1070,658,1068,661,1069,663,1073,663,1077,665,1079,669,1079,673,1080,676,1084,680,1086,683,1086,688,1085,694,1085,699,1080,704,1079,707,1078,715,1077,723,1075,735,1073,743,1073,748,1078,755,1084,763,1086,767,1088,762,1090,753,1092,744,1100,703,1099,699,1102,690,1091,687,1091,684,1093,678,1096,672,1099,666,1102,660,1108,661,1106,656,1103,649,1105,645,1108,641,1115,642,1119,645,1122,649,1120,654,1118,657,1121,659,1123,663,1127,666,1129,668,1129,675,1126,682,1123,690,1123,694,1129,694,1133,694,1137,695,1139,679,1139,671,1144,664,1144,657,1140,657,1138,655,1137,652,1138,643,1140,640,1145,638,1151,640,1152,649,1153,654,1158,657,1162,662,1165,677,1164,691,1162,716,1164,719,1159,720,1160,725,1161,737,1161,776,1161,782,1162,783,1158,785,1156,787,1148,788,1139,789,1137,783,1139,780,1146,779,1147,772,1146,762,1144,751,1141,740,1138,723,1136,712,1135,701,1124,701,1122,704,1124,708,1124,716,1124,723,1124,732,1125,742,1125,751,1123,772,1120,777,1118,780,1117,784,1113,783,1113,781,1112,777,1112,770,1116,755,1115,745,1112,724,1110,719,1108,726,1103,739,1100,761,1097,775,1091,777,1088,781,1084,784,1080,784,1080,780,1079,780,1074,782,1067,782,1063,779,1064,767,1064,758,1060,750,1056,763,1050,774,1056,784,1063,785,1065,790,1054,789,1041,789,1035,781,1033,767,1036,764,1035,756,1032,740,1030,720,1022,717,1023,707,1018,697,1017,694,1025,671,1027,670,1031,664,1033,661,1032,654,1033,649" href="test.html"  alt="" title=""/>';
            htmlcode += '<area alt="" title="" href="#" shape="poly" coords="1360,885,1362,800,1473,800,1471,887" />';  
            htmlcode += '<area alt="Lobby" title="" href="lobby.html" shape="poly" coords="1473,800,1472,886,1548,886,1547,800" />';
            htmlcode += '<area alt="Hol" title="" href="hol.html" shape="poly" coords="1358,887,1549,887,1550,953,1359,953" />';
            htmlcode += '<area alt="" title="" href="#" shape="poly" coords="1357,954,1423,953,1423,1021,1354,1022" />';
            htmlcode += '</map>';
            imgContainer.innerHTML = htmlcode
            break    
        }   

默认值：
var htmlcode=''；
htmlcode+=''；
htmlcode+='有条件，因为我需要不同分辨率的不同区域的不同图像贴图

我尝试为“sun”
div
添加更高的
z索引，但它不会显示在图像顶部

你知道我怎样才能做到这一点吗？
将sun div移到实际代码下面

<div class="background-container">..</div>
<div class="sun">..</div>

。。
..
那么mapify什么时候添加class元素呢？你能让一个监听器等待mapfy填充该元素，然后通过检测来调用它吗？坦白说，JS不是我的专业领域。但是我想如果我这样做的话，修改将应用于所有加载mapify的页面。我只想让太阳光照到那一页。它应该是有条件的。嗯，类似这样的：？没错。我将把sun放在页面的上半部分，但这就是我的想法，是的。我将.sun div移到了.background容器下面，并应用了z-index:2，它就可以工作了。非常感谢。添加了z-index:2，现在可以工作了。非常感谢你！欢迎：）祝您有一个愉快的一天。不幸的是，添加z索引会阻止区域被单击。有什么解决办法吗？你说的“应用javascript”是什么意思？你能提供一个例子吗？我不是想添加一些特殊的javascript。我的意思是，它可以点击，或者你可以添加href=“#”
<div class="background-container">..</div>
<div class="sun">..</div>