Thankyou ingeva
can anyone explain any problems with using onHover events to change the visibility of a div through css visibility of a div ?
If not, then il use that method 
The reason why I didn't go into details was that I haven't been using much JavaScript lately so it's a little rusty.
But make a function like this:
function onoff (id,onoff)
{ if (!GetElementByID(id)) return false;
GetElementById (id).visibility = onoff;
return true;
}
If "onoff" is "hidden" the element will still take up place but in your case it must be in a different layer than the main page, so it doesn't matter. The opposite of "hidden" is "visible".
Of course, you need something like this HTML/JavaScript code for the element:
<div id="element" onmouseover ='onoff("element","visible")' onmouseout ='onoff("element","hidden")'>(to be filled by function)</div>
If you want a text variable to fill the box and set the position ov the element, do it like this:
GetElementById (id).innerHTML = text;
GetElementById (id).style.top = top;
GetElementById (id).style.left = left;
Of course you need to define the top and left positions. You can probably find a routine for that also, but this function is very browser dependable so you may have to do some studying.
To define text variables in JavaScript from php, do this:
<script type="text/JavaScript">
<?php
echo <<<end
<!-- (Some older browsers and "3C validation requires this)
var baby = "$text1";
var doll = "$text2";
var puppy = "$text3";
var teddy = "$text4";
// -->
</script>
end;
?>
...and you can call the function specifying one of the texts: baby, doll, puppy or teddy.
Since I am multilingual, I sometimes put different language texts in different php include files, so all I need to change for a different language is the name of the include file. But this is outside the scope of this thread ....
I recommend the W3schools for help here. Their javascript reference is quite readable, although you need to learn the basics of the language before you get too intimate with the semantics.
I don't know if I can leave an URL here, but if you search for "JavaScript Tutorial" you'll find a link to the W3schhols. W3C is
THE authority on web programming standards.
AFTERTHOUGHT:
Since the "visibility" settings can differ between browsers, it might be an idea to use this instead:
function changeStackOrder(layer)
{
document.getElementById("img1").style.zIndex=layer;
}
"layer" is the layer (or stack) number you want to place the element in. If it's higher than the main page, it will show, and if it's lower (and the main page has an opaque background) it won't. I believe this will work for all browsers that can interpret JavaScript.
Unsolved 
Offline 
