McCueSoft homepage that has a javascript moving images and resizes to fit browser.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="scripts/raphael.js"></script>
<script type="text/javascript" src="scripts/imagesQueue.js"></script>
<script type="text/javascript">
var client = navigator.userAgent;
var bclientWidth;
var bclientHeight;
var scaleFactor;
var iconScaleFactor;
window.onresize = window_onresize;
var paper;
var background;
var banner;
var networks;
var networks_mo;
var networks_up = false;
var systems;
var systems_mo;
var systems_up = false;
var developer;
var developer_mo;
var developer_up = false;
var ball;
var ball_mo;
var ball_on = false;
var ball_bounce = true;
var ball_x = 0;
var ball_y = 0;
var xbounce = 4;
var ybounce = 4;
var preload = false;
function window_onresize(){
if(preload){
updateBrowserClientSize();
paper.setSize(bclientWidth, bclientHeight);
background.attr("width", bclientWidth);
background.attr("height", bclientHeight);
banner.attr("width", bclientWidth);
banner.attr("height", Math.floor(scaleFactor*150));
networks.attr("x", 0);
networks.attr("y", Math.floor(scaleFactor*150));
networks.attr("width", Math.floor(iconScaleFactor*355));
networks.attr("height", Math.floor(iconScaleFactor*345));
networks_mo.attr("x", 0);
networks_mo.attr("y", Math.floor(scaleFactor*150));
networks_mo.attr("width", Math.floor(iconScaleFactor*355));
networks_mo.attr("height", Math.floor(iconScaleFactor*345));
systems.attr("x", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)));
systems.attr("y", Math.floor(Math.floor(scaleFactor*150)));
systems.attr("width", Math.floor(iconScaleFactor*355));
systems.attr("height", Math.floor(iconScaleFactor*345));
systems_mo.attr("x", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)));
systems_mo.attr("y", Math.floor(Math.floor(scaleFactor*150)));
systems_mo.attr("width", Math.floor(iconScaleFactor*355));
systems_mo.attr("height", Math.floor(iconScaleFactor*345));
developer.attr("x", bclientWidth - Math.floor(iconScaleFactor*355));
developer.attr("y", Math.floor(scaleFactor*150));
developer.attr("width", Math.floor(iconScaleFactor*355));
developer.attr("height", Math.floor(iconScaleFactor*345));
developer_mo.attr("x", bclientWidth - Math.floor(iconScaleFactor*355));
developer_mo.attr("y", Math.floor(scaleFactor*150));
developer_mo.attr("width", Math.floor(iconScaleFactor*355));
developer_mo.attr("height", Math.floor(iconScaleFactor*345));
ball.attr("width", Math.floor((scaleFactor / 4)*86));
ball.attr("height", Math.floor((scaleFactor / 4)*89));
ball_mo.attr("width", Math.floor((scaleFactor / 4)*86));
ball_mo.attr("height", Math.floor((scaleFactor / 4)*89));
}
}
function updateBrowserClientSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
bclientWidth = myWidth;
bclientHeight = myHeight;
scaleFactor = bclientWidth/660;
var iconWidthFactor = (bclientWidth/3)/355;
var iconHeightFactor = (bclientHeight - Math.floor(scaleFactor*150))/345;
iconScaleFactor = (iconWidthFactor <= iconHeightFactor) ? iconWidthFactor : iconHeightFactor;
iconScaleFactor = (Math.floor(iconScaleFactor*345) < Math.floor((scaleFactor*150)/2)) ? iconWidthFactor : iconScaleFactor;
}
function ballbounce(){
if (ball_bounce == true){
if (ball_x > bclientWidth - Math.floor((scaleFactor / 4)*86))
xbounce = -4;
if (ball_x < 1)
xbounce = 4;
if (ball_y > bclientHeight - Math.floor((scaleFactor / 4)*89))
ybounce = -4;
if (ball_y < Math.floor(scaleFactor*(150 - 20)))
ybounce = 4;
ball_x += xbounce;
ball_y += ybounce;
ball.attr("x", ball_x);
ball.attr("y", ball_y);
ball_mo.attr("x", ball_x);
ball_mo.attr("y", ball_y);
}
t=setTimeout("ballbounce()",25);
}
Raphael.fn.circlePath = function(x , y, r){
var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z";
return s;
}
function finishOnload(){
preload = true;
updateBrowserClientSize();
paper = Raphael(0, 0, bclientWidth, bclientHeight);
background = paper.image("background.jpg", 0, 0, bclientWidth, bclientHeight);
ball_y = Math.floor(scaleFactor*(150 - 20));
banner = paper.image("mccuesoft.png", 0, 0, bclientWidth, Math.floor(scaleFactor*150));
networks_mo = paper.image("networks_mo.png", 0, Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
networks = paper.image("networks.png", 0, Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
systems_mo = paper.image("systems_mo.png", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
systems = paper.image("systems.png", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
developer_mo = paper.image("developer_mo.png", bclientWidth - Math.floor(iconScaleFactor*355), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
developer = paper.image("developer.png", bclientWidth - Math.floor(iconScaleFactor*355), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
networks.mouseover(function () {
if(!networks_up) {
networks.hide();
networks_mo.show();
networks_up = true;
}
});
networks_mo.mouseout(function () {
if(networks_up) {
networks.show();
networks_mo.hide();
networks_up = false;
}
}).click(function () {
window.location.assign("http://www.protechs-online.com/about_chad.htm");
});
systems.mouseover(function () {
if(!systems_up) {
systems.hide();
systems_mo.show();
systems_up = true;
}
});
systems_mo.mouseout(function () {
if(systems_up) {
systems.show();
systems_mo.hide();
systems_up = false;
}
}).click(function () {
window.location.assign("http://www.protechs-online.com/about_chad.htm");
});
developer.mouseover(function () {
if(!developer_up) {
developer.hide();
developer_mo.show();
developer_up = true;
}
});
developer_mo.mouseout(function () {
if(developer_up) {
developer.show();
developer_mo.hide();
developer_up = false;
}
}).click(function () {
window.location.assign("http://www.protechs-online.com/about_chad.htm");
});
ball_mo = paper.image("ball_mo.png", ball_x, ball_y, Math.floor((scaleFactor / 4)*86), Math.floor((scaleFactor / 4)*89));
ball = paper.image("ball.png", ball_x, ball_y, Math.floor((scaleFactor / 4)*86), Math.floor((scaleFactor / 4)*89));
ball.mouseover(function () {
if(!ball_on) {
ball.hide();
ball_mo.show();
ball_on = true;
ball_bounce = false;
}
});
ball_mo.mouseout(function () {
if(ball_on) {
ball.show();
ball_mo.hide();
ball_on = false;
ball_bounce = true;
}
}).click(function () {
window.location.assign("http://www.protechs-online.com/about_chad.htm");
});
if(client.search(/msie 8/i) > -1 ||client.search(/msie 7/i) > -1){
//consoleDisplay.innerHTML += "MSIE7/8 delay show" + "<br />";
MSIE_hide();
d=setTimeout("MSIE_show()",1000);
}
ballbounce();
}
function MSIE_show(){
background.show();
banner.show();
networks.show();
networks_mo.show();
systems.show();
systems_mo.show();
developer.show();
developer_mo.show();
ball.show();
ball_mo.show();
}
function MSIE_hide(){
background.hide();
banner.hide();
networks.hide();
networks_mo.hide();
systems.hide();
systems_mo.hide();
developer.hide();
developer_mo.hide();
ball.hide();
ball_mo.hide();
}
</script>
<title>McCueSoft</title>
</head>
<body bgcolor="#FFFFFF">
<div id=console></div>
<script type="text/javascript">
consoleDisplay = document.getElementById("console");
imagesQueue = imagesQ;
imagesQueue.queue_images(["background.jpg",
"mccuesoft.png",
"networks.png",
"systems.png",
"developer.png",
"networks_mo.png",
"systems_mo.png",
"developer_mo.png",
"ball.png",
"ball_mo.png"]);
imagesQueue.process_queue();
imagesQueue.onComplete = function()
{
//consoleDisplay.innerHTML += "Image caching complete" + "<br />";
finishOnload();
}
imagesQueue.onLoaded = function()
{
//consoleDisplay.innerHTML += "Image cached" + "<br />";
}
</script>
</body>
</html>