Using Events to Capture Image Clicks - fapnip/openeos GitHub Wiki

Example of how to capture a click event on the current page image

Put the following in an Eval Action at the point where you'd like to capture clicks:

// Click Event Example
// (Wrap in immediate function to avoid polluting global scope)
;(function(){

  // Define the function we'll execute on click
  function myImageClickHandler(e) {
    // Don't allow anyone else to handle this click
    e.stopImmediatePropagation()
    // Get coordinates of click, relative to image, from event object
    var x = e.value.x // A float value from 0 to 1, with 0 being the left edge of the image, 1 the right
    var y = e.value.y // A float value from 0 to 1, with 0 being the top edge of the image, 1 the bottom
    // Go to a page based on where they clicked
    if (x < 0.5) {
      // Left half of the image was clicked
      if (y < 0.5) {
        // Top half of the left side was clicked
        pages.goto('option-upper-left')
      } else {
        // Bottom half of the left side was clicked
        pages.goto('option-lower-left')
      }
    } else {
      // Right half of the image was clicked
      if (y < 0.5) {
        // Top half of the right side was clicked
        pages.goto('option-upper-right')
      } else {
        // Bottom half of the right side was clicked
        pages.goto('option-lower-right')
      }
    }
  }

  // Add our function as an image-click listener
  pages.addEventListener('image-click', myImageClickHandler)

  // Add a function to clean up our listener when page changes
  pages.addOnNextPageChange(function() {
    // Remove our event listener
    pages.removeEventListener('image-click', myImageClickHandler)
  })

})()