man today i wanted to create a small javascript where if the user put their mouse arrow on an image, i want it to show a little popup window to show a message, but i didnt want an alert, i wanted a div included with css. so this is the only thing i could come up with, i hope this helps you.

if you want to see it in action, just put your mouse over the little question mark image below. hopefully that works for you. if you have a better script please tell me

here is the code i use to make this happen:

Javascript Code:
<style type="text/css">
<!--
.box {
background-color: #F4F4F4;
border: 1px solid #CCC;
height: 100px;
width: 200px;
padding: 5px;
display:none;
position:absolute;
}

-->
</style>
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideText(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowText(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>


<span
onmouseover="ShowText('Message'); return true;"
onmouseout="HideText('Message'); return true;"
href="javascript:ShowText('Message')">
<img src="http://www.wallpaperama.com/forums/post-images/20081107_6718_question-mark.gif">
</span>
<div
id="Message"
class="box"
>
You can find good wallpapers at wallpaperama.com plus stuff to get your wallpaper website going
</div>


check out my example, just put your mouse over the question mark image:


You can find good wallpapers at wallpaperama.com plus stuff to get your wallpaper website going