javascript with images

[cwl157]

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

[scriptkeeper]

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>

[cwl157]

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.

[shlagish]

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?

[cwl157]

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

[shlagish]

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
}

[cwl157]

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

[cwl157]

No one knows?

[shlagish]

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