User:Eleanorg/Prototyping Yr 1 Timester 1/jQuery Crossfade

From XPUB & Lens-Based wiki

An html page containing two images, one over the other, which crossfade based on the mouse position within the window. 

<!DOCTYPE: html>
<html>
<head>
<script src="jquery.js"></script>     // relies upon jQuery being saved in same directory

<script>
$(window).mousemove(function (event){
  console.log("mouse!", event);
  var o = Math.min(1.0, event.pageX / $(window).width());
  console.log(o);
  $("#imga").css('opacity', o)        // equivalent to #imga {opacity:var;} in css
  $("#imgb").css('opacity', 1.0-o)    // inverts the percentage for #imgb, so they'll crossfade
});
</script>


<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
    </head><body>
       <div>
         <p>percent is: 0.46</p>

         <img id="imga" src="shipTrack3.cgi_files/4552559587_d35d7942ab_b.jpg" alt="http://www.flickr.com/photos/whiteknuckled/4552559587/" style="position: absolute;">

         <img id="imgb" src="shipTrack3.cgi_files/4228521046_0c421e03f0_o.jpg">
         
       </div>
    <sfdocready id="sfDocReady"></sfdocready></body></html>
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Eleanorg/Prototyping_Yr_1_Timester_1/jQuery_Crossfade&oldid=20861"