User:Eleanorg/Prototyping Yr 1 Timester 1/jQuery Crossfade
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>