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 Code:
<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 ([url]http://www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit [url]http://www.dynamicdrive.com/[/url] 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>
Is it possible to save a viewable copy of an interactive page at different stages?
Reply With Quote
Bookmarks