title: Using mouse coordinates in javascript, how to accommodate for different screen sizes?
body: <p>I'm trying to make a very simple slideshow based on the x and y coordinates of the mouse. At the moment I am using pixels in js - so as you can see from the code, when the mouse verges over a certain point, the display is updated for each element. Is there a way I could use percentages in javascript, instead of px? So that regardless of screen width and height, the images are shown at the same point (e.g. if the mouse is 25% over the screen, change display, rather than certain number of pixels). Here is my code:</p>
  
  <pre><code>var mouseX;
  var mouseY; 
  
  var image1 = document.getElementsByClassName('test')[0];
  var image2 = document.getElementsByClassName('test2')[0];
  
  // create variables for percentages of screen?
  
  image1.style.display = "block";
  image2.style.display = "none";
  
  
  function init(){
  
      document.onmousemove = function(e){
      mouseX = e.screenX;
      mouseY = e.screenY;
      console.log(mouseX, mouseY);
          if (mouseX &lt;= 400) {
              image1.style.display = "none";
              image2.style.display = "block";
          } 
          else if (mouseX =&gt; 800) {
              image2.style.display = "none";
              image1.style.display = "block";
          }
         //will add more of the same here
      }
  }
  </code></pre>