Im developing a web page, where i can drag one image upon another background image and merge them...
my problem is , i want to know the position of dragged image by the user..
im using php and javascript functions to develop this...
please anybody know about this ..please get me information..
thanks in advance..
Shanti.
Jump to PostHello Shanti,
theImage.offsetTopandtheImage.offsetLeftwill give you the values you need to display to your user.
Than you can chose where you like to display them.
most probably in:window.status = theImage.offsetTop +" : " + theImage.offsetLeftp.s.:
For the values to get dynamically updated, you should use it …
Hello Shanti, theImage.offsetTop and theImage.offsetLeft will give you the values you need to display to your user.
Than you can chose where you like to display them.
most probably in: window.status = theImage.offsetTop +" : " + theImage.offsetLeft p.s.:
For the values to get dynamically updated, you should use it inside your imagedrag function.
Regards.
hello troy..
very very thanks for your reply..
I can't understand exactly where to be placed...
can you please explain me with one example...
please ...
thanks again
Shanti.
Than, please send us the code of your dragImage function so we can see.
this is my complete code:
please have a look and try to solve my problem...please...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript">
/*
INFORMATION:
============
Copyright 2001 by CodeFoot.com
Free for all users, but leave in this notice
For IE4.X and later; degrades gracefully.
INSTRUCTIONS:
=============
Step One:
---------
Place this script in the head of the page.
Set the six dimensioning variables where
shown in the script (below).
Step Two:
---------
In the body, give each image a unique name
and attach the functions as shown:
<img src="someimage.jpg"name="imageOne"width="100" height="100"onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
<img src="anotherimage.jpg"
name="imageTwo"
width="100" height="100"
onDrag="dragResizeImage(event,this.name)"
onClick="clickResetImageSize(this.name)">
Any number of images may be used; however,
all should usually be the same default size.
Step Three:
-----------
Add the iBeReady variable to an onload event
in the body tag:
<body onload="iBeReady=true;">
*/
// THE SCRIPT:
// ===========
// sets the default size of the image(s)
defaultXsize = 100;
defaultYsize = 100;
// sets the minimum size of the image(s)
minimumXsize = 50;
minimumYsize = 50;
// sets the maximum size of the image(s)
maximumXsize = 250;
maximumYsize = 250;
// Do not edit below this line.
// ----------------------------
iBeReady = false;
function dragResizeImage(dragEvent,which){
alert(which);
if (iBeReady){
posX = eval("document."+which+".offsetLeft");
posY = eval("document."+which+".offsetTop");
newXsize = dragEvent.x;
newYsize = dragEvent.y;
newXsize = newXsize - posX;
newYsize = newYsize - posY;
if (newXsize >= maximumXsize) newXsize = maximumXsize;
if (newYsize >= maximumYsize) newYsize = maximumYsize;
if (newXsize <= minimumXsize) newXsize = minimumXsize;
if (newYsize <= minimumYsize) newYsize = minimumYsize;
eval("document."+which+".width=newXsize");
eval("document."+which+".height=newYsize");
}
}
function clickResetImageSize(which){
if (iBeReady){
eval("document."+which+".width=defaultXsize");
eval("document."+which+".height=defaultYsize");
}
}
function frame(id){
document.getElementById("div1").setAttribute("background","themes/New Folder/imgb"+id+".gif");
}
function frame_image(id){
document.getElementById("div2").setAttribute("src","images/img"+id+".jpg");
}
//shanti functions
function findPosX(obj)
{
var curleft = 0;
if(obj.offsetParent)
while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.x)
curleft += obj.x;
var curtop = 0;
if(obj.offsetParent)
while(1)
{
curtop += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
else if(obj.y)
curtop += obj.y;alert(curleft);
alert(curtop);
return curleft;return curtop;
}
function shanti(id)
{
alert(document.getElementById("div2").value);
}
</script>
<style type="text/css">
.drag{
position:relative;
cursor:hand;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:138px;
top:205px;
width:23px;
float:inherit;
height:190px;
z-index:100;
}
#layer2 {
position:absolute;
left:138px;
top:205px;
width:23px;
height:190px;
z-index:1;
}
#Layer2 {
position:absolute;
left:322px;
top:685px;
width:269px;
height:262px;
z-index:2;
}
-->
</style>
</head>
<body onLoad="iBeReady=true;">
<form name="form1" action="" method="post" onSubmit="return shanti();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="0%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td><img src="images/img3.jpg" width="75" height="100" name="image1" onClick="frame_image(1)"></td>
<td> </td>
<td><img src="images/img2.jpg" width="75" height="100"name="image2" onClick="frame_image(2)"></td>
<td> </td>
<td><img src="images/img4.jpg" width="75" height="100" class="drag" name="image2113" onDrag="dragResizeImage(event,this.name)" onClick="frame_image(3)"></td>
<td> </td>
<td><img src="images/img6.jpg" width="75" height="100" name="image3" onClick="frame_image(4)"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#F5F3F6"><img src="fiji-html/fiji-html/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="themes/New Folder/newfeats.jpg" width="55" height="55"></td>
<td><p style="text-align: justify;">We've added a designer canvas for your creative outlet</p>
<p style="text-align: justify;">You can place a photo, add designer borders, spice up with some designs, and customize with your personal text and/or choose from a bunch of our pre-formatted texts for any occassion !!</p></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#F5F5F7"><img src="fiji-html/fiji-html/images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td><table width="0%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><img src="themes/New Folder/ts_bg.jpg" width="150" height="250"></td>
<td width="260" background="themes/New Folder/tshirt_bg.jpg " id="div1" >
<img src="themes/New Folder/tshirt_bg.jpg" name="div2" width="110" height="75" class="drag" id="div2" onClick="return findPosX(this);">
</div> </td>
</tr>
</table></td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="50" align="center" bgcolor="#F6F6F8">Borders</td>
<td align="center"> </td>
<td width="50" align="center" bgcolor="#FBFBFD">Text</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="1" cellpadding="8" cellspacing="0" bordercolor="#C0BDBC">
<tr>
<td><img src="themes/New Folder/img1.gif" width="86" height="80" onClick="frame(1)"></td>
<td><img src="themes/New Folder/img2.gif" width="79" height="80"onClick="frame(2)"></td>
</tr>
<tr>
<td><img src="themes/New Folder/img3.gif" width="80" height="80"onClick="frame(3)"></td>
<td><img src="themes/New Folder/img4.gif" width="80" height="80"onClick="frame(4)"></td>
</tr>
<tr>
<td><img src="themes/New Folder/C080_bg_11_web.gif" width="80" height="80"></td>
<td><img src="themes/New Folder/C080_bg_15_web.gif" width="80" height="80"></td>
</tr>
</table></td>
</tr>
</table> </td>
</tr>
<tr>
<td align="center"><label>
<input type="submit" name="Submit" value="Submit">
</label></td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
</body>
</html>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.