2

Hi I'm working on a project to show the Earth and I need some buttons to appear alongside it, at the moment I can only get my buttons to show up either below or above the javascript. I've included a screenshot and my html code, I hope someone can help, thanks so much, let me know if there's something missing that you'd need to be able to help.

HTML:

<body>
    <div id="webgl"></div>
    <script src="js/three.min.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/TrackballControls.js"></script>
    <script src="js/earth.js"></script>
    <script type="text/javascript" src="aud.js"></script>
    <script type="text/javascript" src="date.js"></script>
    <input type="image" id="intro" src="images/icon-intro.png"/>
</body>
</html>

Image:

image

Here you can see the button outside of the scene, I want it to be placed over it instead.

Ethranes
  • 329
  • 1
  • 5
  • 22

2 Answers2

1

Give the button an absolute position and, if necessary, some z-index like so

#intro {
  position: absolute;
  left: 300px; /* X coordinate, adjust as needed */
  top: 300px; /* Y coordinate, idem */
  z-index: 10; /* This should be needed only if the #webgl container has already some z-index value*/
}
Wazaraki
  • 494
  • 2
  • 7
1

you can use the div overlay to show the buttons over the earth image ..for more information please refer the following link

for that you can set z-index of button greater then the z-index of image ...thus making the button to appear over the image

Rajat Bhadauria
  • 260
  • 2
  • 12