onclick display image cordinets 1

skosterow · Nov 23, 2003

Greetings All,

I have an image thats 200 x 400. Im kinda new to Javascript, but i need to be able to click in the image, place a dot in that image then save the cordinates where the dot was placed, into mysql. I have the saving to the database down, however, i cant seem to work out the onclick function.

Any sugestions on a tutorial, etc will be greatly apprishiated.

Thanks

- Scott

jammer1221 · Nov 23, 2003

Heres the code to get the x y coordinates for an image but I tried to add a dragable image script to go along just to see if it worked to drag another image over the 200x400 image an still tell the xy coordinates but it didnt work so maybe what you have is different and will work but any way heres the code

Code:

<body>
<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language=&quot;JavaScript&quot;>
<!--

var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className==&quot;drag&quot;){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function(&quot;dragapproved=false&quot;)
//-->
</script>
</head>


<script language=&quot;javascript&quot;>


var where = &quot;&quot;; // which link
function checkwhere(e) {
        if (document.layers){
        xCoord = e.x;
        yCoord = e.y;
}
        else if (document.all){
        xCoord = event.clientX;
        yCoord = event.clientY;
}
        else if (document.getElementById){
        xCoord = e.clientX;
        yCoord = e.clientY;
}


}
//the x coordinate varible is xCoord
//the y coordinate varible is yCoord        


document.onmousemove = checkwhere;
if(document.captureEvents) {document.captureEvents(Event.MOUSEMOVE);}

</script>
<img src=&quot;

200x400.bmp

Code:

&quot; width=&quot;189px&quot; height=&quot;384px&quot; onMouseup=&quot;alert('X Coordinates: '+ xCoord + '  Y Coordinates: ' + yCoord + '')&quot;>

the bold stuff is were you change the image name to your own...hope that is somewhat of what you need
Jammer1221

jammer1221 · Nov 24, 2003

Did this help you at all...please post back...tell me if there is anything you would like me to change
Jammer1221

skosterow · Nov 27, 2003

Jammer,

Sorry i have been down with phemonai, I will run this today, if it is id like to offer you a few bucks for your time!

- Scott

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onclick display image cordinets 1

skosterow

Technical User

jammer1221

Programmer

jammer1221

Programmer

skosterow

Technical User

Similar threads

Part and Inventory Search

Sponsor