Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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'">
    Last edited by Graeme Hackston; 02-25-2003 at 05:57 AM.

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Graeme but ....

    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

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/show...threadid=22503

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

  • #5
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cursor position

    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

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #7
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    THANKS GUYS!!!

    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>

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hi Graeme

    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

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    also, location.href will work

  • #12
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Graeme

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

    How does it look in Mozilla?

    Keith

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Posts
    624
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

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

  • #14
    New Coder
    Join Date
    Jul 2002
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thanks Graeme and requestcode

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •