My current project can be found at: (please note that the sounds will not autoplay in the future).
I am attempting to incorporate the sun effect from this codepen: https://codepen.io/Hackroro/pen/ByrKLZ
I have realized that in order for the sun to appear on the page, it needs to be added immediately after
<div class="mapify-holder">The following HTML code needs to be inserted after the
<div class="mapify-holder"><div class="sun">
<div class="ray_box">
<div class="ray ray1"></div>
<div class="ray ray2"></div>
<div class="ray ray3"></div>
<div class="ray ray4"></div>
<div class="ray ray5"></div>
<div class="ray ray6"></div>
<div class="ray ray7"></div>
<div class="ray ray8"></div>
<div class="ray ray9"></div>
<div class="ray ray10"></div>
</div>
</div>
Below is the actual code of the page:
default:
var htmlcode = '<img src="images/Intrare.jpg" usemap="#map" class="map full-img" width="1920px" height="1080px">';
// More code...
imgContainer.innerHTML = htmlcode
break
}
The <image> and the <area>s are included within a javascript conditional as I require different image maps with distinct areas for various resolutions.
I attempted assigning a higher z-index to the "sun" div, but it does not display above the image. Any thoughts on how I can accomplish this?