Is it possible to save a viewable copy of an interactive page at different stages? [Archive]

randomfatty

12-12-2007, 06:57 PM

Hi,

I don't know if this makes sense but for my dissertation I want to have my work viewed as an interactive image where the viewer can arrange my designs as they wish. I've got a main image with moveable items so they can decide which colour shirt the subject wears and which hairstyle etc...I've been using this script :

http://www.dynamicdrive.com/dynamicindex4/image3.htm

I've got this script working great but I want to be able to the see the results of what people do when they play with these images. Is there anyway of adding a 'save' button that then sends me a copy of what they've saved, or even better an automatic feature that means as soon as someone leaves that page I get a copy of the page sent to me as they left it?

I've searched and searched but I don't even know if it's possible!

If anybody can help I would really appreciate it!

Laura

JohnRostron

12-13-2007, 03:22 PM

I don't know about automatically recording the page from within, but there are two other alternatives.

One is simply to take screenshots along the way. The other is to use a recorder to get a dynamic record of what is going on. I recommend wink (http://www.debugmode.com/wink/) for this. It works well, and it is free. It will output to a swf file.

John Rostron

Aurelius1664

12-16-2007, 01:31 PM

You can't really grab the screen as such but you could modify the script to remember the positions of each of the images. You could then have the positions emailed to you either via a save button or on leaving the screen.

Additionally, it would be possible to write a script that took the email text and recreated the screen exactly as it was saved. This would give you much the same outcome as saving the screen. I modified the script example below with a text area that shows the position of each image.

<html>
<head>
<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 aoPositions = new Object();

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"
aoPositions[this.targetobj.id] = new Object();
aoPositions[this.targetobj.id].Position = this.targetobj.style.left + ", " + this.targetobj.style.top;
UpdatePositions();
return false
}
}
}

dragobject.initialize()

function UpdatePositions()
{
var textPositions;

textPositions = document.getElementById("textPositions");
textPositions.value = "";
for(var object in aoPositions)
{
if(aoPositions[object].Position)
{
textPositions.value += object + ": " + aoPositions[object].Position + "\n";
}
}
}
</script>
</head>
<body>
<img id="carOne" src="test.gif" class="drag"/><br/>
<img id="carTwo" src="test2.gif" class="drag"/><br/>

<br /><br /><br /><br /><br /><br /><br /> <br />
<textarea id="textPositions" rows="10" cols="50">
</textarea>
</body>
</html>