Scrolling Issue

Hello,

I am having an issue with a span I create dynamically with an image
inside that I use as a close button. The image has a css cursor
property set to pointer, and an onclick event associated with it. When
the the span is scrolled, I reset the position of my image to it is
always in the top right corner of the span.

When I scroll down the span element, my image loses its cursor
property and also its onclick event, unless I scroll back to the very
top in which case it works again. It is like the onclick event and the
cursor property do not scroll with the image.

If anyone has any suggestions, I would love to hear them. Thanks!

function CreateSpan() {
var sp = document.getElementById('spDetails');
if (!sp) {
sp = document.createElement('span');
sp.style.position='absolute';
sp.style.overflow='auto';
sp.style.width='400px';
sp.style.height='200px';
sp.style.border='3px solid #000000';
sp.style.backgroundColor='green';
sp.style.opacity='.95';
sp.style.filter='alpha(opacity=95)';
sp.style.mozOpacity='.95';
sp.style.color='white';
sp.id='spDetails';
sp.style.zIndex=8000;//always want on top, pop-up box style.
sp.style.visibility='visible';
sp.onscroll = function () {
var sp2, sp;
sp = document.getElementById('spDetails')
sp2 = sp.getElementsByTagName('img')[0];
if (sp2) {
sp2.style.top=(sp.scrollTop + 3).toString() + 'px';
sp2.style.right='3px';
} else {
alert('no img');
}
}//end function


var spInner = new String('');
spInner += '<img style="height:20px;width:
20px;cursor:pointer;position:absolute;top:3px;right:3px;border:1px
solid black;" onclick="HideSpan()" src="http://192.168.5.35/Images/
poPics/close.gif" />';
spInner += '<table id="poDetTbl"
style="color:#FFFFFF;position:absolute;top:22px;width:380px"> ';
spInner += ' <tr> ';
spInner += ' <td>Data Line 1: </td> ';
spInner += ' <td></td> ';
spInner += ' </tr> ';
spInner += ' <tr> ';
spInner += ' <td>Data Line 2: </td> ';
spInner += ' <td></td> ';
spInner += ' </tr>';
spInner += ' <tr>';
spInner += ' <td>Data Line 3: </td>';
spInner += ' <td></td> ';
spInner += ' </tr> ';
spInner += '</table>';

sp.innerHTML=spInner;
document.body.appendChild(sp);
} else {
sp.style.visibility='visible';
}//end if-else span already exists
}//end function CreateSpan
.