View Full Version : Position of Onmouseover Images

09-08-2010, 10:00 AM

I am currently working on an intranet page for my place of work. The page consists of divs that pop up as an image when the mouse rolls over a certain item.

This is the code:

<a href="#" onmouseover="pop4.style.display='block';" onMouseMove="pop4.style.left=(event.clientX)-200; pop4.style.top=(event.clientY)-450;" onMouseOut="pop4.style.display='none';"><img src="pics/de_commission.gif" border="0" align="center" valign="top"></a>


<div id="pop4" style="position:absolute; z-index:100; border:2px solid #000000; padding:20px; display:none;background:white">

<table style='border:1px; font-size:15px; font-family:Arial;'>

<tr><td style='font-size:20px'><b>Commission Charges</b></td></tr>

<tr><td><img src="pics/de_charges3.png" border="0" align="center"></img></a>



Every time I add a new item to the page I have to edit the co-ordinates for every item (there's about 100 of them).

I would like for all the images that pop up to be shown in the centre of the page, no matter how far it is scrolled down. Can you help?


09-08-2010, 06:09 PM
position: fixed will "fix" an element to a specific portion of the page no matter how far you scroll.

You should also create an external style sheet. Makes styling much easier and manageable.

09-09-2010, 12:00 PM
Sorry i wasnt very clear.

What I want is the divs to pop up wherever i am looking on the page so if I am at the bottom of the page the dive will pop up there etc....

Unfortunately due to restrictions on out work intranet we cannot use external CSS! :(

09-09-2010, 01:19 PM
position: fixed will "fix" an element to a specific portion of the page no matter how far you scroll
That is misleading, it will fix the element in relation to the browser window not the page. So as far as I can see that is just what you need. It won't work in IE6 but there are various work rounds. Just Google "Position Fixed IE6"

09-09-2010, 02:26 PM
An external style sheet is also on your local intranet server. You are restricted in such a way that you cant add a .css to your own server?

09-09-2010, 03:25 PM
All I can do is edit the body of a html document through an 'intranet manager'. I dont have access to the server files.

I have tried changing it to position:fixed however all this does is make the div show up at the bottom of the page, the div disappears on mouse out so it's no good!