Display a div within view port

I've an image gallery, that displays images in a 5X5 matrix. Each image has a onmouseover function where in a hidden div is displayed with some details about the image and the div with the details gets hidden using onmouseout. The div that contains the details about the image may contain clickable links and hence I am displaying the div just under the cursor position.

The problem I am facing is with the images in the 5th column. If the div that co开发者_开发知识库ntains the details has more content, it creates a horizontal scroll bar and the details get cut off. How do I always show the details div inside the view port just under the cursor?

There's not much to it but here's the code

function eventRollOver(id) {

    var did = 'img_'+id;
    document.getElementById(did).style.display='';
}
function eventRollOut(id) {
    var did = 'img_'+id;
    document.getElementById(did).style.display='none';
}

Many Thanks

Try overflow:hidden

you will need to use CSS absolute positioning for the details div position:absolute, and also extract the mouse location from the event object ( how-to ) in order to apply the x and y values of the mouse to the left and top CSS properties of the div..