Enlargening Image On Mouseover

[nasim.]

Hey, I'm new to the forums. Seeing as web design is becoming more and more apart of my life, I figured I should participate in the sharing, questioning and learning going on inside internet communities.
Anyway, I'm currently working on a page for resource room materials, which consists of movies, books and CD's. We have a very large book list on the web page, and I wanted to make it so when the mouse scrolls over a title, a little box would pop up next to it providing information on the book. I borrowed the code from www.dynamicdrive.com
The CSS goes:

.info{
position: relative;
z-index: 0;

}

.info:hover{
background-color: transparent;
z-index: 50px;
}

.info span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ECF1EF;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.info span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;

}

.info:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 330px;
left: 560px; /*position where enlarged image should offset horizontally */

}

a.info:link {color: black;}
a.info:active {color: black;}
a.info:visited {color: black;}
a.info:hover {color: black;}
a.info {text-decoration: none; }
</style>

The HTML goes as follows (each entry is inside a long table):

<tr class="rr_style_two" >
<td><a class="info" href="#info">TITLE<span><img src="image.jpg" /></span></a></td>
</tr>

My only problem is that the list is long and requires you to scroll down on the page. If you scroll down and hover the mouse over a title, it's information will appear at the top of the page, where I set it to appear above, making it impossible to view. I was wondering what would be the easiest method where I could do to get the box placed in a different location for each title (perhaps always at the top of the screen).