jai9x9 Posted May 18, 2006 Share Posted May 18, 2006 I'm working on a World of Warcraft based website for reference to crafted materials, and I'm trying to code a mouseover efect. I seem to have that working to a degree, but now if I scroll down at all on the page, the mouseover effect is left at the top of the page. It's not working at the mousetip. Here's a link to what I've done so far. Can anyone tell me what I did wrong? I'm still new to coding.http://www.geocities.com/asyialw/leather.html Link to comment Share on other sites More sharing options...
scott100 Posted May 18, 2006 Share Posted May 18, 2006 Ok i think i see the problem.The co-ordinates of the pop up are in relation to the window, not the page length, so that is why when you scroll the pop up starts appearing higher and higher.What is needed is a script that can return where the mouse is on the page not the screen.*goes in search... Link to comment Share on other sites More sharing options...
jai9x9 Posted May 18, 2006 Author Share Posted May 18, 2006 Thanks for the reply Scott. How do I change the Co-ords? Any help would be great Link to comment Share on other sites More sharing options...
scott100 Posted May 18, 2006 Share Posted May 18, 2006 Here it is: http://javascript.internet.com/page-detail...oordinates.htmlsee how the Y value always increases as you scroll down the page, that's what you need.Copy the relevant part of the code over to your page and then your pop up should behave as expected. Link to comment Share on other sites More sharing options...
jai9x9 Posted May 19, 2006 Author Share Posted May 19, 2006 ty for the help, but I'm just not understanding it. I did notice that the code you linked mentioned "if browser is IE" and "if browser is NS." I use Firefox, is that gonna make a difference? And then I'm not sure what to change to make it apply to what I'm trying to do. It would make more sense to me to put that in the code in the heading like what I have. Am I getting any closer? <heading><script type="text/javascript"><!--function showLayer(e, obj){var x = (e.clientX) ? e.clientX : window.event.clientX;var y = (e.clientY) ? e.clientY : window.event.clientY;var elm = document.getElementById(obj);elm.style.left = x + 10 + 'px';elm.style.top = y + 'px';elm.style.display = 'block';}function hideLayer(obj){var elm = document.getElementById(obj);elm.style.display = 'none';}//--></script> thats what I'm using now. Link to comment Share on other sites More sharing options...
scott100 Posted May 19, 2006 Share Posted May 19, 2006 Hey sorry, i haven't neglected you Try this.Copy over your bit in the <head> <html><head><script type="text/javascript"><!--function showLayer(e, obj){var x = (e.clientX) ? e.clientX : window.event.clientX;var y = (e.clientY) ? e.clientY : window.event.clientY;var elm = document.getElementById(obj);elm.style.left = tempX + 10 + 'px';elm.style.top = tempY + 'px';elm.style.display = 'block';}function hideLayer(obj){var elm = document.getElementById(obj);elm.style.display = 'none';}//--></script></head> Add this to the <body> <script language="JavaScript1.2"><!-- Beginvar 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) { // grab the x-y pos.s if browser is IEtempX = event.clientX + document.body.scrollLeft;tempY = event.clientY + document.body.scrollTop;}else { // grab the x-y pos.s if browser is NStempX = e.pageX;tempY = e.pageY;} if (tempX < 0){tempX = 0;}if (tempY < 0){tempY = 0;} return true;}// End --></script> Link to comment Share on other sites More sharing options...
jai9x9 Posted May 21, 2006 Author Share Posted May 21, 2006 ty so much that worked wonders! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now