Log in

View Full Version : on mouse over trick...


Disaster-sama
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?
Thanks
codeexploiter
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!!
mastergeek70
12-07-2006, 01:26 AM
Are you looking for something like this?



<HTML><head>

<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}

document.getElementById('TestDiv').style.left=tempX;
document.getElementById('TestDiv').style.top=tempY;

return true;
}

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

function ShowIt() {
document.getElementById('TestDiv').style.display='block';
}

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

function HideIt() {
document.getElementById('TestDiv').style.display='none';
}

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

</script>


</head>
<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
</div>

</HTML>



==============================================================================================================
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.

==============================================================================================================
12345c
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) :

<html><head>
<script>d=document;g=function(X){return d.getElementById(X);}
onload=function(){
g('Button1').onmousemove=function(e){e=e||event;
g('TestDiv').style.left=e.clientX + d.body.scrollLeft+5
g('TestDiv').style.top=e.clientY + d.body.scrollTop-2
}
g('Button1').onmouseover=g('Button1').onmouseout=function(e){e=e||event;g('TestDiv').style.display
=e.type=='mouseover'?'block':'none';
}
}
</script>
</head><body>
<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
</div>
</body></html>(modern Firefox supports .clientX; I did check in FF1.07)

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