PDA

View Full Version : Dragable Elements - Get a screenshot when they leave the page?



randomfatty
02-27-2008, 09:49 PM
1) Script Title: Dragable Elements

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/image3.htm

3) Describe problem: Hi, I have this page on my website:

www.lauracostelloe.co.uk/doggy.htm

and there is an image for people to change and play around with. What I'd like to do is be able to see what people do with this image. Is there anyway that when they leave the page or press submit etc that I could get sent a screen shot of the page automatically?

I'm open to suggestions on how to see what people do so that I can compare the images - so it doesn't have to be what I just said!

Any help would be appreciated!

randomfatty
02-28-2008, 12:41 PM
If getting a screenshot of the page isn't possible, is there anyway to add a submit button that saves that page?

Somebody please help!

Laura

Aurelius1664
02-29-2008, 11:19 PM
I have modified your page, included below, with a script that remembers the positions of the images into a text area. The positions are then included in the submit when the user sends comments. You can then paste the positions text back into the textarea click the new button and it will put the items into the positions in the text. I tested the code in IE and Firefox and it works fine. I did notice though that the drag script turns everything blue in firefox so you might want to take a look at that.

Had to split the html into two parts because of the size limitation in posting replies on the forum. Any problems, changes or you need anything explaining let me know.

Nice pics by the way!

Aurelius1664
02-29-2008, 11:19 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>LAURA COSTELLOE | Graphic Designer Portfolio | Vector Illustration, Graphic Illustration and a little bit of Web Design!</title>
<meta name="description" content="Laura Costelloe is a Graphic Design student studying at Leeds Metropolitan University. She specialises in Illustrations of females in punk style, rock style
and on the subject of feminism versus female enpowerment." />
<meta name="keywords" content="Laura Costelloe, Graphic Design, Illustration, Leeds Met Uni, Graphic Arts and Design, Learning Agreement, BA (HONS), vector illustrations." />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="http://www.lauracostelloe.co.uk/styles/style.css" rel="stylesheet" type="text/css">
<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"
// Added This <- Aurelius1664
GetPositions();
return false
}
}
}

dragobject.initialize()




/******************************************************

Aurelius1664 - Begins Here

******************************************************/

var _aimageDragable = null;

function PushPositions()
{
var asItems;
var asProperties;
var textPositions;
var sPositions;
var imageDragable;

// Read the text ready for repositioning
textPositions = document.getElementById("textPositions");
sPositions = textPositions.value;
if(sPositions.length == 0)
{
alert("Move things around then copy the text from the box to clipboard and reset. Paste the text back in and click 'put em back' and they'll magically reposition. If you set the display style on the text area to hidden when they submit it will be included with the comments. You can then have a version of the page you can paste in the text and reposition.");
return;
}

// Parse and push the items
asItems = sPositions.split("\n");
for(var iItemIndex = 0; iItemIndex < asItems.length; iItemIndex++)
{

asProperties = asItems[iItemIndex].split(",");
if(asProperties.length == 3 &&
asProperties[0].length > 0 &&
asProperties[1].length > 0 &&
asProperties[2].length > 0)
{

// Find the image and reset the position
imageDragable = document.getElementById(asProperties[0]);
if(imageDragable != null)
{
imageDragable.style.left = asProperties[1];
imageDragable.style.top = asProperties[2];
}

}

}





}

function GetPositions()
{

var aimageAll;
var sPositions;
var textPositions;
var iSavedIndex;

_aimageDragable = new Array();
iSavedIndex = 0;
aimageAll = document.getElementsByTagName("img");
for(iImageIndex = 0; iImageIndex < aimageAll.length; iImageIndex++)
{
// Get positions for all dragable images
if(aimageAll[iImageIndex].id.length > 0 && aimageAll[iImageIndex].className == "drag")
{
_aimageDragable[iSavedIndex] = new Object();
_aimageDragable[iSavedIndex].Name = aimageAll[iImageIndex].id;
_aimageDragable[iSavedIndex].X = aimageAll[iImageIndex].style.left;
_aimageDragable[iSavedIndex].Y = aimageAll[iImageIndex].style.top;
iSavedIndex++;
}
}

// Put the positions in the text box
sPositions = "";
for(iPosition = 0; iPosition < _aimageDragable.length; iPosition++)
{
sPositions += _aimageDragable[iPosition].Name + ",";
sPositions += _aimageDragable[iPosition].X + ",";
sPositions += _aimageDragable[iPosition].Y + "\n";
}

textPositions = document.getElementById("textPositions");
textPositions.value = sPositions;

}


function buttonRearrange_OnClick()
{

PushPositions();

}

/******************************************************

Aurelius1664 - Ends Here

******************************************************/

</script>

</head>

Aurelius1664
02-29-2008, 11:20 PM
<body background="images/background-image.gif" onLoad="MM_preloadImages('images/worklink2.png','images/writtenlink2.png')">
<br />
<br />
<br />
<br />



<table width="700" height="150" border="0" cellspacing="0" cellpadding="3" align="center" background="images/greenbackground.png">
<tr>
<th rowspan="2" scope="col" width="270"><img src="http://www.lauracostelloe.co.uk/images/recent.png" align="right" alt="Most recent vector illustration from Laura Costelloe. Cavegirl vector face on black background."></th>
<th colspan="2" scope="col"><h1>RECENT WORK</h1><p>This is my most current piece of work, and is still under construction. It's representing the innate instinct of attraction born into us all.. </th>
<th scope="col" width="150">&nbsp;</th>
</tr>
<tr>
<th scope="col" height="45"><a href="quickportfolio.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('viewworklink','','images/worklink2.png',1)"><img src="http://www.lauracostelloe.co.uk/images/worklink1.png" alt="link to portfolio" name="viewworklink" width="135" height="15" border="0"></a></th>
<th scope="col"><a href="detailedportfolio.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('written work link','','images/writtenlink2.png',1)"><img src="http://www.lauracostelloe.co.uk/images/writtenlink1.png" alt="link to written work portfolio" name="written work link" width="135" height="15" border="0"></a></th>
<th scope="col" height="25"></th>
</tr>
</table>


<table width="700" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<th colspan="3" bgcolor="#333333" scope="col"><a href="index.htm">| home </a><a href="about.htm">| about moi </a><a href="research.htm">| research </a><a href="quickportfolio.htm">| quick portfolio </a><a href="detailedportfolio.htm">| detailed portfolio </a><a href="contact.htm">| contact |</a>&nbsp;</th>
<th bgcolor="#333333" scope="col" width="100">&nbsp;</th>
</tr>
</table>

<div id="Layer2" style="position:absolute; width:278px; height:370px; z-index:2; left: 903px; top: 6px;"><imgsrc="http://www.lauracostelloe.co.uk/images/frontpic.png"></div>
<br />
<div id="Layer6" style="position:absolute; width:200px; height:115px; z-index:6; left: 587px; top: 358px;"><img id="imgOne" src="http://www.lauracostelloe.co.uk/images/doggy/grey_top.png" class="drag"></div>

<div id="Layer7" style="position:absolute; width:200px; height:115px; z-index:7; left: 890px; top: 470px;"><img id="imgTwo" src="http://www.lauracostelloe.co.uk/images/doggy/grey_stocking.png" class="drag"></div>

<div id="Layer9" style="position:absolute; width:200px; height:115px; z-index:9; left: 820px; top: 482px;"><img id="imgThree" src="http://www.lauracostelloe.co.uk/images/doggy/white_stocking.png" class="drag"></div>

<div id="Layer10" style="position:absolute; width:200px; height:115px; z-index:10; left: 840px; top: 372px;"><img id="imgFour" src="http://www.lauracostelloe.co.uk/images/doggy/white_top.png" class="drag"></div>
<div id="Layer8" style="position:absolute; width:200px; height:115px; z-index:8; left: 870px; top: 290px;"><img id="imgFive" src="http://www.lauracostelloe.co.uk/images/doggy/green_top.png" class="drag"></div>
<div id="Layer5" style="position:absolute; width:200px; height:115px; z-index:5; left: 211px; top: 293px;">
<table width="150" border="0" cellspacing="0" cellpadding="0" background="images/table_bg.png" height="260">
<tr>
<td bordercolor="#666666">&nbsp;</td>
</tr>
<tr>
<td><div align="center"><a href="doggy.htm">doggy style</a></div></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">

<th height="15" scope="col" bgcolor="#333333"><img src="http://www.lauracostelloe.co.uk/images/title_doggy.png" width="170" height="15"></th>
<th height="15" scope="col" bgcolor="#333333"><img src="http://www.lauracostelloe.co.uk/images/title_doggy2.png"></th>
<th bordercolor="#333333" bgcolor="#333333" scope="col" height="15">&nbsp;</th>
</tr>
<tr>
<td colspan="2" rowspan="3"><img src="http://www.lauracostelloe.co.uk/images/doggy_background.png"></td>
<td height="85" bordercolor="#333333" bgcolor="#333333">&nbsp;</td>
</tr>
<tr>
<td height="85" bordercolor="#333333" bgcolor="#333333">&nbsp; </td>
</tr>
<tr>
<td height="85" bordercolor="#333333" bgcolor="#333333">&nbsp;</td>
</tr>
<tr bgcolor="#333333">
<td width="170" height="15"></td>
<td width="400" bgcolor="#333333">
<form id="contactform" method="get" action="email_test.asp">
<input type="hidden" name="EmailTo" value="me@lauracostelloe.co.uk">
<input type="hidden" name="subject" value="Laura Costelloe Interactive Doggy Contact">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><label for="name">NickName: </label>
<input type="text" name="nickname" width="250"/>
</td>
<td><label for="email">Email Address:</label>
<input type="text" name="EmailFrom" width="250" />
</td>
<tr>
<td colspan="2"><label for="contactform-message">Comment: <span>(required)</span></label>
<textarea name="Messsage" cols="50" rows="5" id="contactform-message">Go on - write something!.. Anything!
</textarea>

<textarea name="textPositions" id="textPositions" cols="50" rows="5" id="contactform-message">
</textarea>

<br/>
<input type="image" alt="send message to Morgan and costelloe Design" class="imagesubmit" src="images/submit.png" />
<button id="buttonRearrange" onclick="buttonRearrange_OnClick()">Put 'em where it says</button>
</td>
</tr>
</tbody>
</table>
</form></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="quickportfolio.htm">go to static portfolio</a></td>
<td width="400"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3"><h3>WEBSITE DESIGNED AND MAINTAINED BY LAURA COSTELLOE<br />Tel: 01422 311 441 | Mob: 07816 445 719 | <a href="mailto:me@lauracostelloe.co.uk">Email: me@lauracostelloe.co.uk</a></h3></td>
</tr>
</table>

<div id="Layer3" style="position:absolute; width:150px; height:300px; z-index:3; left: 950px; top: 249px;"><img src="http://www.lauracostelloe.co.uk/images/nudeback.png"></div>
<div id="Layer4" style="position:absolute; width:150px; height:209px; z-index:4; left: 987px; top: 387px;"><img src="http://www.lauracostelloe.co.uk/images/facefront.png"></div>
<div id="Layer1" style="position:absolute; width:224px; height:47px; z-index:1; left: 192px; top: 66px;"><img src="http://www.lauracostelloe.co.uk/images/title.png"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-3369314-2";
urchinTracker();
</script>
</body>
</html>