Hi,
I have this example you may be able to customize to fit your needs. I save all kinds of code in my library. Javascript, php, and other code snippets because you never know when you may need it for a design.
[HTML]<html>
<head>
<title>Your Page Title</title>
<!--You can just add some CSS code to the top of your page below the <head>, to make a CSS class in order to customize the look of the pop-up. -->
<!--The part the code above of interest to you, is the 3rd line: filter:alpha(opacity=80);. This line makes the popup transparent with the opacity value set to 80-->
<!--You can set the opacity within 0 - 100. If you set to 0, you won't see the popup. -->
<style type="text/css">
.transparent {
filter:alpha(opacity=80);
background-color:#B7CEEC;
display:none;
width:170;
height:100;
position:absolute;
color: navy;
border: 1 red solid;
}
</style>
<!--Add some JavaScript right below the CSS above. This code above uses only 2 functions, one to display the pop-up and another to hide the pop-up. -->
<script>
/* this function shows the pop-up when
user moves the mouse over the link */
function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + 35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x;
/* set the pop-up's top */
Popup.style.top = y;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<!--The last part is placing the function into the body of the page-->
<a href="" onMouseOut="Hide()" onMouseOver="Show()" onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse is still over the link.
<div id="Popup" class="transparent">
<div style="background-color:#C3FDB8">
<b>Title goes here</b></div>
<div>Description goes here</div>
</div>
</body>
</html>
[/HTML]hth
