View Full Version : on mouse over trick...

12-05-2006, 08:27 PM
i was using Mambo to create some websites for students, then i notice that in a button uses on mouse over and displays some textbox and that textbox followed the mouse pointer all over the button.
does anyone knows the trick?

12-06-2006, 04:12 AM
Can you provide a link to the page where forums users can view the effect?

I wonder what is the relationship between Mambo and ASP!!

12-07-2006, 01:26 AM
Are you looking for something like this?


<script type="text/javascript">

var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0

// ===========================

function getMouseXY(e) {

if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}


return true;

// ===========================

function ShowIt() {

// ===========================

function HideIt() {

// ===========================


<input id="Button1" style="width: 100px; height: 100px" type="button" value="button" onmouseover="ShowIt();" onmouseout="HideIt();"/>

<div id="TestDiv" style="display:none; border:1px solid black;width:150px;height:100px;position:absolute;text-align:center;background-color:#FFFFF0;">
<br/>This is a sample message


Disclaimer: The provider of this code offers no warranties or assurances of any kind. The code may or may not be 100% compliant with every single coding standard up to the current date, hour or minute. If you are a whiney, pretentious "code nazi" offended by the occasional use of deprecated tags, non-shorthand CSS, voluminous use of ASP.NET, or other preferences chosen by the provider, then bypass this post or leave the website completely - this is not for you.


12-07-2006, 11:47 AM
mastergeek70 : This is old script (for NN4 also).

But this script is more short and effective (not check mouseover on all document) :

<script>d=document;g=function(X){return d.getElementById(X);}
g('TestDiv').style.left=e.clientX + d.body.scrollLeft+5
g('TestDiv').style.top=e.clientY + d.body.scrollTop-2
<input id="Button1" style="width: 100px; height: 100px" type="button" value="button">

<div id="TestDiv" style="position:absolute;display:none; border:1px solid black;width:150px;height:100px;text-align:center;background-color:#FFFFF0;">
<br/>This is a sample message
</body></html>(modern Firefox supports .clientX; I did check in FF1.07)

...or write (!d.all?e.pageX:e.clientX + d.body.scrollLeft)