Using Image Overlays - fapnip/openeos GitHub Wiki

Example of how to display stuff over the main page image

Put the following in an EVAL Action at the point where you'd like to display your stuff:

// Wrap in immediate function to avoid pollution of global scope
(function(){

  // Create a new overlay object
  var myOverlay = new Overlay({
    type: 'image', // Overlay the image (could also use 'page')
    ready: function(el) {
      // When the overlay's element is ready:
      // Create a new element for my red dot example
      var myRedDot = document.createElement('div')
      myRedDot.style.backgroundColor = 'red' // Make it red
      myRedDot.style.borderRadius = '100%' // Round
      myRedDot.style.width = '50px' // 50px wide
      myRedDot.style.height = '50px' // 50px high
      myRedDot.style.position = 'absolute' // position absolute
      myRedDot.style.top = '50%' // in the middle
      myRedDot.style.left = '50%' // in the center
      myRedDot.style.transform = 'translate(-50%, -50%)' // offset so it's centered
      // Allow the red dot to get pointer events (clicks, etc)
      myRedDot.style.pointerEvents = 'auto'
      // Add on click action
      myRedDot.onclick = function(e) {
        // Say something when clicked
        new Say({label: 'Hey!', type: 'instant'})
        // Don't allow the click event to bubble up
        e.preventDefault()
        // Remove the overlay after click
        myOverlay.remove()
      }
      
      // Add the red dot to the overlay element
      el.appendChild(myRedDot)
    }
  })
  
  pages.addOnNextImage(function(){
    // Remove my overlay when the image changes
    myOverlay.remove()
  })

})()

See some of the demo teases that use image overlays for more examples.