title: jQuery MouseMove
body: <p>I would like to have an image which changes into three images when the mouse is moved to the left and right of it.</p>
  
  <ul>
  <li>Left to show the left arrow when the cursor is on the left side</li>
  <li>Center to show the up arrow when the cursor is in the center</li>
  <li>Right to show the right arrow when the cursor is on the right side</li>
  </ul>
  
  <p>I found a jQuery script that works well. I edited it a bit and got it to display the left and right arrows when the mouse was moved. I just have the center part left to do and am not sure how to add that.</p>
  
  <p>Here is what I have. (See also jsFiddle page: <a href="http://jsfiddle.net/WhkJB/" rel="nofollow">http://jsfiddle.net/WhkJB/</a> )</p>
  
  <pre><code>var image_src = {
      left: "http://i.imgur.com/ubKrq.jpg",
      right: "http://i.imgur.com/SxHCS.jpg",
  };
  
  $(document).mousemove(function(event){
      var mloc = {
          x: event.pageX,
          y: event.pageY
      };
  
      if( 
          (mloc.x &gt;= 0 &amp;&amp; mloc.x &lt;= $(document).width()/2 )
      ){
          $(".arrow").attr("src", image_src.left);
      }else if( 
          (mloc.x &gt;= $(document).width()/2 &amp;&amp; mloc.x &lt;= $(document).width()) &amp;&amp;
          (mloc.y &gt;= 0 &amp;&amp; mloc.y &lt;= $(document).height()/2)
      ){
          $(".arrow").attr("src", image_src.right);
      }
  
  });​
  </code></pre>
  
  <p>Another question - When you move the mouse below the image it doesn't work. Is there anyway to make it so it does it so it moves on the whole page?</p>
  
  <p>Any help would be greatly appreciated.</p>