Display a div within view port

Question

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 contains 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

Answer 1

Try overflow:hidden

Answer 2

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..