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?

Code:

<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) :

Code:

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

Thread: on mouse over trick...

Thread Tools

Search Thread

on mouse over trick...

Bookmarks

Bookmarks

Posting Permissions