hi everyone...
i need some pop window such as the one found on this page:
http://www.needscripts.com/Resource/24810.html

if you hover over the word for example "javascript" or "webpage", a tiny screen pops up in which it has contents that you can access as well..


What i need it to do is: display a list of names..when i click on any name, a popup should show displaying contents of the person and his mail..

i found something like this once:


<html dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Inside This Content</title>
</head>

<body>

<p dir="ltr">
<A
href="../../../../gp/reader/0385504209/ref=sib_dp_pt/104-5986722-8767115#reader-link">
<IMG
id=prodImage onmouseover="sitb_showLayer('contentpopover'); return false;"
onmouseout="sitb_doHide('contentpopover'); return false;" height=60 src=""
width=59 border=0></A>
<STYLE type=text/css>.tinypopup {
FONT-SIZE: 11px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
</STYLE>

<DIV class=n2 id=contentpopover onmouseover="sitb_showLayer('contentpopover')"
style="Z-INDEX: 1999; LEFT: -1000px; VISIBILITY: hidden; WIDTH: 360px; POSITION: absolute; TOP: -1000px"
onmouseout="sitb_doHide('contentpopover')" visibility="hide"
onLoad="sitb_hideLayer('contentpopover');">
<DIV onmouseover="sitb_showLayer('contentpopover')"
style="BORDER-RIGHT: #aca976 1px solid; BORDER-TOP: #aca976 1px solid; BORDER-LEFT: #aca976 1px solid; BORDER-BOTTOM: #aca976 1px solid; BACKGROUND-COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=1 width="100%" border=0>
<TBODY>
<TR>
<TD width=5 height=5></TD>
<TD></TD></TR>
<TR vAlign=top>
<TD width=5>&nbsp;</TD>
<TD class=tinypopup><B class=h3color>Inside This Content</B><BR>
<DIV class=spacer></DIV>
<DIV class=tinypopup><B>New!</B>&nbsp; <A
href="http://www.google.com">Namess&nbsp;on&nbsp;Related&nbsp;Topics</A>
| <A
href="http://www.google.com">Concordance</A>
| <A
href="http://www.google.com">Text&nbsp;Stats</A>
</DIV>
<DIV class=spacer></DIV><B>Citations:</B>
<A
href="http://www.google.com">content</A>
<A
href="http://www.google.com">content2</A>
<DIV class=spacer></DIV><B>Browse Sample Pages:</B>
<A
href="http://www.google.com">Front
Cover</A> |
<A
href="http://www.google.com">Copyright</A>
|
<A
href="http://www.google.com">Excerpt</A>
|
<A
href="http://www.google.com">Back
Cover</A> |
<A
href="http://www.google.com">Surprise
Me!</A>
<DIV class=spacer></DIV>
<FORM style="MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px"
name=strip_form
action=/gp/reader/0385504209/ref=sib_dp_srch_pop/104-5986722-8767115
method=get><INPUT type=hidden value=search-inside name=v>
<TABLE cellSpacing=0 width="100%">
<TBODY>
<TR>
<TD class=tinypopup><B>Search Inside This :</B></TD>
<TD><INPUT name=keywords></TD>
<TD><INPUT type=image height=21 alt=Go! width=21
src="button.gif" value=Go! border=0
name=go></TD></TR></TBODY></TABLE></FORM></TD>
<TD width=5>&nbsp;</TD></TR>
<TR>
<TD width=5 height=5></TD>
<TD></TD></TR></TBODY></TABLE></DIV></DIV>
<SCRIPT language=javascript>
<!--


var contentPopoverTimer = null;

function sitb_showLayer(obj) {
if(document.layer) {
return; // netscape 4
}

if(contentPopoverTimer) {
clearTimeout(contentPopoverTimer);
contentPopoverTimer = null;
}

var sitb_lyr = sitb_getLayer(obj);
if(!sitb_lyr) {
return;
}

var sitb_img = sitb_getLayer('prodImage');

if(!sitb_img) {
return;
}

var sitb_x, sitb_y, sitb_temp;
if(sitb_img.x) {
sitb_x = sitb_img.x;
} else {
sitb_temp = sitb_img;
sitb_x = sitb_img.offsetLeft;
while(sitb_temp.offsetParent) {
sitb_temp = sitb_temp.offsetParent;
sitb_x += sitb_temp.offsetLeft;
}
}
if(sitb_img.y) {
sitb_y = sitb_img.y;
} else {
sitb_temp = sitb_img;
sitb_y = sitb_img.offsetTop;
while(sitb_temp.offsetParent) {
sitb_temp = sitb_temp.offsetParent;
sitb_y += sitb_temp.offsetTop;
}
}

sitb_lyr.style.visibility="visible";
sitb_lyr.style.display="block";
sitb_lyr.style.left = sitb_x + (sitb_img.width / 2);
sitb_lyr.style.top = sitb_y + (sitb_img.height / 2) + 40;
}

function sitb_hideLayer(obj) {

var sitb_lyr = sitb_getLayer(obj);

if(!sitb_lyr) {
return;
}

if(document.layers) {
sitb_lyr.visibility="hidden";
} else {
sitb_lyr.style.display="none";
sitb_lyr.style.visibility="hidden";
}

}

function sitb_doHide (obj) {
if(document.layer) {
return;
}
contentPopoverTimer = setTimeout('sitb_hideLayer("' + obj +'")', 50);
}

if(document.layers) {
sitb_hideLayer('contentpopover');

} else {

}


function sitb_getLayer(obj) {
if(document.layers) {
return document.layers[obj];
} else if(document.all && !document.getElementById) {
return document.all[obj];
} else if(document.getElementById) {
return document.getElementById(obj);
} else {
return null;
}
}

//-->
</SCRIPT></p>

</body>

</html>





but the problem with this script is that if i tried to create another image with a popup window on it like the first one, then i get javascript error....
when we move mouse over on the first image, everything is cool but when i hover over the other image that i create, it displays a javascript error window with the debug thing...

The link i gave above is perfectly what i need, but i don't know how to do it...

what should i do?

Note that am not that well advanced in coding, so i prefer if you go into details...thanks allooooot...