Finding cursor position and redirection

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.

<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'">

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

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.

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

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>

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>

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.

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

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

also, location.href will work

I have made the changes and it works perfectly in IE.

How does it look in Mozilla?

Keith

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

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.