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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2003
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript with images

    is there a way for the user to control images in javascript. For example like use the arrow keys to move a picture around the screen or click a picture with the mouse and drag it around the screen. If there is can someone explain to me how to do it.
    thanks

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Northern California
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Courtisy of Mr. J

    <script type="text/javascript">
    <!--
    var ns=document.getElementById&&!document.all
    var moving = false;
    var tempX = 0;
    var tempY = 0;
    var dex=""

    function dragnow(id) {
    elm_id = document.getElementById(id)
    if(dex!=""){
    dex.style.zIndex = ""
    }
    moving=true

    posX = tempX - elm_id.offsetLeft;
    posY = tempY - elm_id.offsetTop;
    elm_id.style.zIndex = 1
    dex=elm_id
    }

    function moveto(e) {
    tempX = (!ns) ? event.clientX : e.pageX;
    tempY = (!ns) ? event.clientY : e.pageY;
    if(moving != false) {
    elm_id.style.left = (tempX - posX) + "px";
    elm_id.style.top = (tempY - posY) + "px";
    }
    }

    document.onmousemove = moveto;
    document.onmouseup=new Function("moving=false");

    //-->
    </script>

    <div id="dis1" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:50px;height:100px
    ;width:100px; background:#00FF00"> </div>

    <div id="dis2" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:200px;height:100p
    x;width:100px; background:#FFFF00"> </div>

    <div id="dis3" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:350px;height:100p
    x;width:100px; background:#FF0000"></div>

    <div id="dis4" onmousedown="dragnow(this.id)" style=" position:absolute;top:100px;left:500px;height:100p
    x;width:100px; background:#0000FF"></div>

  • #3
    New Coder
    Join Date
    Jun 2003
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what about using the arrow keys

    is there a way to use the arrow keys or other keys to move or create images. i was also wondering what does the ! mark in javascripts do.
    thanks
    ps the script you gave me works perfectly for dragging the boxes thanks for it.
    Last edited by cwl157; 08-12-2003 at 04:56 PM.

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The ! mark means "does not" or "is not"
    It's basically a negation sign I guess

    In this example:

    tempX = (!ns) ? event.clientX : e.pageX;
    He creates a variable (tempX)
    If ns is not True (not beign the ! mark), tempX will be event.clientX, otherwise, it'll be e.pageX

    Which brings me to my own question:

    wouldn't
    tempX = (ns) ? e.pageX : event.clientX
    do the same thing?
    Shawn

  • #5
    New Coder
    Join Date
    Jun 2003
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    is there something for true

    So if ! means no or false is there something in javascript that means yes or true.

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Putting nothing:
    var x=1
    if(x==1){
    do something
    }
    else{
    do something else
    }

    var x=1
    if(x!=1}
    do something else
    }
    else{
    do something
    }
    Shawn

  • #7
    New Coder
    Join Date
    Jun 2003
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    does anyone know

    Oh yeah that makes sense thanks and sorry for the stupid question but does anyone know how to make an image move or create in image with keyboard commands?
    Thanks
    Last edited by cwl157; 08-14-2003 at 04:52 AM.

  • #8
    New Coder
    Join Date
    Jun 2003
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts

    no one knows

    No one knows?

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I once saw something like this:

    if(e.which==120)
    do something
    else if(e.which==122)
    do something else.

    120 is the unicode to "x" and 122 is the unicode to "z".

    So by using unicodes, you can trigger functions (move an image for example).

    Maybe this will give you an idea.
    If you want, I can elaborate on this technique, but I don't have the time today...
    Shawn


  •  

    Posting Permissions

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