...

View Full Version : Finding cursor position and redirection



Nomad
02-25-2003, 06:06 AM
Help please.

I would like to use a fixed background (bgproperties="fixed") with navagation "buttons" as part of the background. The "buttons" would therefore be at fixed coordinates.

When a person clicks on one of them, how can I obtain the cursor coordinates, check which "button" has been clicked and pass control to the corresponding link?

I would appreciate any help I can get.

Thanks.

Graeme Hackston
02-25-2003, 06:54 AM
<input type="button" value="click" id="btn" onclick="alert('y = '+event.clientY+
'\nx = '+event.clientX+
'\nid = '+this.id);
location.href='http://www.codingforums.com/showthread.php?s=&threadid=15270'">

Nomad
02-25-2003, 07:13 AM
Thanks for you reply but it is not what I am looking for.

The buttons are already on the background. If you have a look at the website below you will see what I mean. (I have included your code also)

Thanks

http://www.webhostplus.org

Graeme Hackston
02-25-2003, 07:35 AM
I don't think you can interact with the background directly. You could use the mouse position and fake it but I can't see being able to use any normal click effects ,rollovers etc., atleast not without some pretty complicated scripting.

Why do the buttons need to be in the backround? If it's positioning you could float them in the same place. See this thread

http://www.webxpertz.net/forums/showthread.php3?s=&threadid=22503

It's late here and I'm off to bed, maybe someone else will jump in.

Nomad
02-25-2003, 12:10 PM
I think I know how I can do the redirect. What I am not sure of is how to establish the mouse has been clicked and what the coordinates are.

Keith

requestcode
02-25-2003, 02:56 PM
How about this for the coordinates:
<script language="JavaScript">
function myalert(e)
{
if(document.all) // IE4+
{
xcoord=event.clientX
ycoord=event.clientY
}
else
{ // NS6+ and NS4
xcoord=e.screenX
ycoord=e.screenY
}
alert(xcoord+":"+ycoord)
}
if(!document.all) // if not IE
{document.captureEvents(Event.MOUSEDOWN)}
document.onmousedown=myalert
</script>

Nomad
02-26-2003, 03:59 AM
Thanks guys - I have the problem solved.

If you are interested, the following code has done the trick.
You can also see it in action at http://www.webhostplus.org

<script language="JavaScript">
function myalert(e)
{ if(document.all) {
xcoord=event.clientX;
ycoord=event.clientY
} else {
xcoord=e.screenX;
ycoord=e.screenY
}
if(xcoord > 49) {
if(xcoord < 187) {
if(ycoord > 244) {
if(ycoord < 276) {
window.location.href("http://www.webhostplus.org/HTMLfiles/WebIntro.html");
}
}
}
}
if(xcoord > 49) {
if(xcoord < 187) {
if(ycoord > 303) {
if(ycoord < 335) {
window.location.href("http://www.webhostplus.org/HTMLfiles/WebDesign.html");
}
}
}
}
if(xcoord > 49) {
if(xcoord < 187) {
if(ycoord > 362) {
if(ycoord < 394) {
window.location.href("http://www.webhostplus.org/HTMLfiles/WebHost.html");
}
}
}
}
if(xcoord > 49) {
if(xcoord < 187) {
if(ycoord > 421) {
if(ycoord < 453) {
window.location.href("http://www.webhostplus.org/HTMLfiles/ContactUs.html");
}
}
}
}
}
if(!document.all)
{document.captureEvents(Event.MOUSEDOWN)}
document.onmousedown=myalert
</script>

Graeme Hackston
02-26-2003, 04:53 AM
Cool, you could probably do rollovers easier than I first thought.

You can position the on buttons like in the link piglet posted in the position:fixed thread. There's also 1 on dynamicdrive.com Then set them to visibility:hidden and show them with your script.

You might also want see if you can make it work in NN6.

Nomad
02-26-2003, 05:35 AM
I don't know anything about NN6.

I know that locating of the cursor will work but do not know how the window.location.href will work (if at all).

Perhaps you can tell me what will happen with my script in NN6?

Keith

Graeme Hackston
02-26-2003, 05:53 AM
In Mozilla 1.0.2 the background repeats and doesn't remain fixed. I guess bgproperties="fixed" is IE only. It will work as described here

http://www.w3schools.com/css/css_background.asp

Graeme Hackston
02-26-2003, 05:54 AM
also, location.href will work

Nomad
02-26-2003, 07:30 AM
I have made the changes and it works perfectly in IE.

How does it look in Mozilla?

Keith

Graeme Hackston
02-27-2003, 12:39 AM
Position fixed is working in Mozilla. If you want, you can download a free copy of the browser here.

http://www.mozilla.org/

You have location.href coded wrong and this is a more standard method of using multipule conditions.

&& means and



if (xcoord > 49 && xcoord < 187 && ycoord > 244 && ycoord < 276) {
window.location.href = "http://www.webhostplus.org/HTMLfiles/WebIntro.html"
}

Nomad
02-27-2003, 03:10 AM
Everything works great!!!

I case anyone else may be interested, the code I finally ended up with is as follows :-

To make background fixed :

<HEAD>
<style type="text/css">
body {
background-image: url("../JPGfiles/Background.jpg");
background-repeat: no-repeat;
background-attachment: fixed }
</style>
</HEAD>

To establish cursor position and redirect :

<BODY>
<script language="JavaScript">
function myalert(e) {
if(document.all) {
xcoord=event.clientX;
ycoord=event.clientY
} else {
xcoord=e.screenX;
ycoord=e.screenY }
if (xcoord > 49 && xcoord < 187 && ycoord > 244 && ycoord < 276)
{ window.location.href = "http://www.webhostplus.org/cgi-bin/WebIntro.pl" }
if (xcoord > 49 && xcoord < 187 && ycoord > 303 && ycoord < 335)
{ window.location.href = "http://www.webhostplus.org/cgi-bin/WebDesign.pl" }
if (xcoord > 49 && xcoord < 187 && ycoord > 362 && ycoord < 394)
{ window.location.href = "http://www.webhostplus.org/cgi-bin/WebHost.pl" }
if (xcoord > 49 && xcoord < 187 && ycoord > 421 && ycoord < 453)
{ window.location.href = "http://www.webhostplus.org/cgi-bin/ContactUs.pl" }
}
if(!document.all)
{document.captureEventsEvent.MOUSEDOWN)}
document.onmousedown=myalert
</script>
</BODY>

Once again, thanks guys.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum