sum of results of multiple functions

[crw150]

Hello,

I'm working on a script to show an enlarged image onmouseover of a thumbnail (see

http://www.tylerkrieg.com).

It works except for positioning. I have these two functions (they work independently, I've tested):

function findPositionY( obj ) {
. . .
return [ obj.y ];
}

function getScrollY(){
. . .
return [ scrOfY ];
}

The script that makes the enlarged image visible onmouseover is:

function overListener(ev) {
var e = window.event ? window.event : ev;
var t = e.target ? e.target : e.srcElement;

thumb=t.src;

large=thumb.replace('-sm','');

newClass=t.id;

var bigImage=document.createElement('img');

bigImage.src=large;
bigImage.className=newClass;
bigImage.style.position = 'absolute';
bigImage.style.top = (obj.y+scrOfY+200)+'px';
bigImage.style.left='200px';
var extra=document.getElementById('holder');
extra.appendChild(bigImage);

//alert (t.getAttribute("src") );

var extra=document.getElementById('holder');
extra.style.visibility='visible';
}


The HTML is below for reference. In the above code, my attempt to change the css class on the new element is not working. Yet the enlarged images are correctly sized, I have no idea why.

More important is positioning, which depends on scrolling. In the line "bigImage.style.top = ...", what I want is the sum of findPositionY(obj) plus getScrollY plus the number 200, plus 'px'. Should I be trying to do this in a variable? Either way, could someone please tell me, what is the correct syntax?

Thank you,
CRW

pertinent parts of the HTML
<style>
.rightFirst {width:91px; height:101px; /*other styling*/}
.img01 {width: 496px; height: 350px;
#extra, #holder{
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
width: 286px;
height: 1px;
z-index: 1000;
}
</style>

<a href="#" id="img01" class="swap">
<img class="rightFirst" src="christmasStory3-sm.jpg" alt="A Christmas Story"/>
</a>
<!-- 16 more images; 4 different classes -->
<div id="holder"></div>