ok, here's what i came up with. It's been tested in Mozilla 1.0, and IE6. i tried to build in backwards compatability, but i couldn't get that to work, so for right now in will only work in newer browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<script>
var pics = [['imag0',1,1],['imag1',-1,1],['imag2',1,-1],['imag3',-1,-1]];
function bounce(brray, xmax, ymax) {
var objekt, x, y, w, h;
for (var i in brray) {
objekt = document.getElementById(brray[i][0]);
x = parseInt(objekt.style.left);
y = parseInt(objekt.style.top);
w = parseInt(objekt.style.width);
h = parseInt(objekt.style.height);
if ( isNaN(x) ) { x = 0; }
if ( isNaN(y) ) { y = 0; }
if ( ( (x == (xmax - w) ) && ( brray[i][1] > 0 ) ) || ( (x == 0) && ( brray[i][1] < 0 ) ) ) { brray[i][1] *= -1; }
if ( ( (y == (ymax - h) ) && ( brray[i][2] > 0 ) ) || ( (y == 0) && ( brray[i][2] < 0 ) ) ) { brray[i][2] *= -1; }
objekt.style.left = (x + brray[i][1]) + "px";
objekt.style.top = (y + brray[i][2]) + "px";
}
}
window.onload = function() { setInterval("bounce(pics, 100, 100);", 50); }
</script>
</head>
<body>
<div style="position: absolute; width: 100px; height: 100px; background-color: #FF0000; left: 0px; top: 0px;">
<img id="imag0" src="somegif.gif" style="position: absolute; background-color: #00FF00; width: 10px; height: 10px; left: 35px; top: 65px;">
<img id="imag1" src="somegif.gif" style="position: absolute; background-color: #0000FF; width: 10px; height: 10px; left: 45px; top: 55px;">
<img id="imag2" src="somegif.gif" style="position: absolute; background-color: #FFFF00; width: 10px; height: 10px; left: 55px; top: 45px;">
<img id="imag3" src="somegif.gif" style="position: absolute; background-color: #FF00FF; width: 10px; height: 10px; left: 65px; top: 35px;">
</div>
</body>
</html>
notice the things in bold. those are the only things that you should need to change.
the first line in bold is a list of the different images that you want to move around. the red part is the image's id tag. the part in blue is the x-axis; -1 is left, 1 is right. the part in green is the y-axis; -1 is down, 1 is up. you can have as many images as you want, you just need to make an entry on this bold line for all of them, and you need to actually make the HTML for that image.
the next two bits of blue and green are the size of the box that you want things to move around in. for instance, if your logo is 468 x 60, then you change the blue to 468, and the green to 60.
the last bit is the number of milliseconds that it should wait between iterations. that is, how fast it should it be moving the boxes. bigger numbers are slower, smaller numbers are faster.
hope this is what you wanted.