...

View Full Version : Script on this??



ashwin
01-09-2004, 12:17 AM
Hi,
I had recently posted a query on this issue and I received replies in pertinent to this and I am very grateful for that. But I tried a lot and I could not get to the solution.

I need to know as to where can I find a script similar to this issue

Issue:- Link: http://www21.brinkster.com/sashwin/survey/test1.html

The user will be moving and placing the Home Image button on the browser.gif image. I need to know the position the user placed the image button on the browser.gif file (position in respect to the browser.gif image and not to the IE browser). I was able to find the coordinates when the user clicks on the browser.gif image but I wasn't able to find out the position of the image when the user moves it on the browser.gif image file.

Thank you.

Mr J
01-09-2004, 01:05 AM
Do you mean something like this?



<HTML>
<HEAD>
<TITLE>Online Survey</TITLE>

<STYLE>
.drag {BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; FILTER: progid:DXImageTransform.Microsoft.Matrix(sizingmethod='auto expand'); BORDER-LEFT: #000000 0px solid; BORDER-BOTTOM: #000000 0px solid}
.thisclass {BACKGROUND-COLOR: gray}
.pic {POSITION: relative}
</STYLE>

<SCRIPT language=JAVASCRIPT type=TEXT/JAVASCRIPT>

moving = false;
active = null;

function showXY(e,container) {
if (document.all) {
e = window.event;
if (e.srcElement.parentElement == container) {
status = ' LEFT: ' + e.offsetX + ' TOP: ' + e.offsetY;
} else {
status = '';
}
} else if (document.layers) {
if (e.target.name == this.id) {
status = ' LEFT: ' + (e.layerX-e.target.x) + ' TOP: ' + (e.layerY-e.target.y);
}
}
return false;
}

function Drag(){
if(event.srcElement.className!="drag") return;
moving=true;
obj=event.srcElement;
X_offset=event.clientX-event.srcElement.style.pixelLeft;
Y_offset=event.clientY-event.srcElement.style.pixelTop;
event.srcElement.style.zIndex = (active?active.style.zIndex+1:1)
active = event.srcElement;
document.onmousemove=Moveto;
}

function Moveto(){
if(!moving) return true;
if(event.button!=1) return true;
obj.style.pixelLeft=event.clientX-X_offset;
obj.style.pixelTop=event.clientY-Y_offset;


form_left=document.getElementById("img1").offsetLeft
image_left=document.getElementById("myimg").offsetLeft
document.getElementById("div1").innerHTML=obj.style.pixelLeft-image_left-form_left

form_top=document.getElementById("img1").offsetTop
image_top=document.getElementById("myimg").offsetTop

document.getElementById("div2").innerHTML=obj.style.pixelTop-image_top-form_top

return false;
}

document.onmouseup=new Function("moving=false");
angle=new Array()
angle[0]=0

function init(){
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function(e){if(e.target!=document){document.routeEvent(e)}else{status=''}};
document['img1'].captureEvents(Event.MOUSEDOWN);
document['img1'].onmousedown = showXY;
} else {
document.onmousedown = showXY;
}
}

j=1

function setvalues(id,num){
ID=id
i=num
j=0
}
</SCRIPT>

</HEAD>
<BODY bgColor=#a9a9a9 onload="init()">

<FORM class=pic id="img1" style="LEFT: 110px; POSITION: absolute; TOP: 140px" onclick=showXY(null,this)>
<IMG style="POSITION:absolute; LEFT: 0px; TOP: 0px" src="Online Survey_files/browser.jpg" name=img1 id="myimg">
</FORM>

<FORM>
<IMG class=drag onmousedown=Drag();setvalues(image1,1) style="LEFT: 50px; POSITION: absolute; TOP: 100px"
src="Online Survey_files/home.gif" name=image1>
</FORM>

<div id="div1"></div>
<div id="div2"></div>

</BODY>
</HTML>

ashwin
01-09-2004, 05:12 AM
Yes exactly. Thanks a million my friend. I was struck in the middle. Now my last question. There will be a Submit button down the page and when the user clicks on the Submit button the user will be taken to a PHP page which indicates "Thank you for your time" and data will be stored in a MySql database file. So I need to store these values and then send these values to a script and in turn to a database. I have thought about it like this.

function putPositions() {
// get the position / rotation data
// suppose you store them in posX, posY, etc.
document.myform.posx.value = posX; (I thought this earlier)
document.myform.posy.value = posT;
return true;
}

<form name="myform" action="whatever.php" onsubmit="putPositions();">
<input name="posx" type="hidden">
<input name="posy" type="hidden">
<input type="submit" value="Now thank me for my time!">
</form

Will this work out. How do I go about in storing the values in the code which you written. Thanks a lot for your time. I appreciate you help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum