CSS/JAVA scrolling images

[bluewalrus]

I'm trying to make a series of images each of which is postioned sepertaley with a div tag. I want the div tag postion to increase when the user puts the mouse over the arrow and when clicked to increase faster (so it moves up faster). I've seen some like this but they use iFrames and iFrames won't work because I'm also trying to use the lightbox 2.03 and that gets cut off. I dont know if anyone has seen a script like this or a website that has it already working. I saw the htmlguru site but the creator is unresponsive and it looks like it may also be using an iFrame.
http://falcon.fsc.edu/cmacdo10/fscnew/photogal2.html
Right now that just links to another page that the images are moved up to the next postition.
The images in the right are the only ones i want to move the script i thought of that might work if this is possible was
#img1 {
position:absolute;
top:y1px;
left:x1px;
}
for the css and each image has different variable # (x2,x3 etc)
then a java script that controls the mouseover and mouse down function
if up.gif==mouseover {
x1=x1+5
}
if up.gif==mousedown {
x1=x1+10
}
and like wise but minus for the down but i dont know java or if its possible to put variables in css. Thanks for any help.

[mburt]

You've got the idea you just have to structure your JavaScript properly.
I assume you want something to the effect of:


<script type="text/javascript">
function expand(id,xy,incr) {
var el = document.getElementById(id);
if (typeof el.st === "undefined") el.st = 0;
el.st = el.st + incr;
el.style[xy] = el.st+"px";
};
</script>
<div onclick="expand('imageID','width',3)">Click here to expand</a>
The xy argument controls which attribute is to be expanded. The incr argument controls how much to increase it by each time.