Move Images around – They remember

[Total: 0    Average: 0/5]

This example shows how to have images that can be clicked and moved around the page.

Head Code:

<style> 
.drag{position:absolute;cursor:hand} 
</style> 
<script language="JavaScript" src="http://www.js-examples.com/bin/cookies.js"></script>

<script language="JavaScript"> 
var isIE = document.all?true:false;
var isNS = document.layers?true:false;

function show(layerid) { 
  if (isIE) parent.descriptions.document.all[layerid].style.visibility="visible"; 
  if (isNS) parent.descriptions.document.layers[layerid].visibility="visible";
}

function hide(layerid){ 
  if (isIE) parent.descriptions.document.all[layerid].style.visibility="hidden";
  if (isNS) parent.descriptions.document.layers[layerid].visibility="hidden";
} 
</script> 
<SCRIPT LANGUAGE="JavaScript"> 
var dragimage="http://www.js-examples.com/js/pic1.gif";
var bmarks = new Array("a1","a2","a3","a4","a5");
var PAGE="1"; // change for each page.
var markX = new Array();
var markY = new Array();
var myCookie = new Cookie(document,"uniquename",6); // expires in 6 hours.

function writeDIVS() {
  for (var i=0;i<bmarks.length;i++) {
    if (isIE){ 
      document.write('<div id="'+bmarks[i]+'" style="position:absolute;left:0;top:0;">');
  	document.write('<img src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms">');
  	document.write('</div>n') 
    }
  }
  if (isNS){ 
    tempdiv='<div id="a1" style="position:absolute;left:0;top:0;"><img name="a1" src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms"></div>n' 
    tempdiv+='<div id="a2" style="position:absolute;left:12;top:0;"><img name="a2" src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms"></div>n' 
    tempdiv+='<div id="a3" style="position:absolute;left:24;top:0;"><img name="a3" src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms"></div>n' 
    tempdiv+='<div id="a4" style="position:absolute;left:36;top:0;"><img name="a4" src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms"></div>n' 
    tempdiv+='<div id="a5" style="position:absolute;left:48;top:0;"><img name="a5" src="'+dragimage+'" alt="Move this MARKER to keep track of your favorite rooms"></div>n' 
    document.write(tempdiv); 
    //document.close(); 
  }
}

function updateCookie() {
  for (var i=0; i< bmarks.length; i++) {
    if (isIE) {
      markX[i] = eval("document.all."+bmarks[i]+".style.left");
      markY[i] = eval("document.all."+bmarks[i]+".style.top");
	}
	if (isNS) {
      markX[i] = eval("document.layers."+bmarks[i]+".left");
      markY[i] = eval("document.layers."+bmarks[i]+".top");
	}
    eval("myCookie.p"+PAGE+"X"+i+"='"+markX[i]+"'");
    eval("myCookie.p"+PAGE+"Y"+i+"='"+markY[i]+"'");
  }
  myCookie.write();
}
function initCookie() {
  if (myCookie.read()) {
    //read the marks from the cookie
    for (var i=0; i < bmarks.length; i++) {
      markX[i] = eval("myCookie.p"+PAGE+"X"+i);
  	markY[i] = eval("myCookie.p"+PAGE+"Y"+i);
    }
  } else {
    // set the marks default initial positions
    for (var i=0; i < bmarks.length; i++) {
      markX[i]=10*i;
  	markY[i]=10*i;
    }
  }
}

var ob; 
function MD(e) { 
  if (isNS) { 
    ob = document.layers[e.target.name]; 
    X=e.x; 
    Y=e.y; 
    return false; 
  } 
  if (isIE) { 
    ob = event.srcElement.parentElement.style; 
    X=event.offsetX; 
    Y=event.offsetY; 
  } 
}
 
function MM(e) { 
  if (ob) { 
    if (isNS) { 
      ob.moveTo((e.pageX-X), (e.pageY-Y)); 
    } 
    if (isIE) { 
      ob.pixelLeft = event.clientX-X + document.body.scrollLeft; 
      ob.pixelTop = event.clientY-Y + document.body.scrollTop; 
      return false; 
    } 
  } 
} 

function MU() { ob = null; updateCookie(); } 

if (isNS) { 
  document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); 
} 

document.onmousedown = MD; 
document.onmousemove = MM; 
document.onmouseup = MU; 
function placemarks() { 
  if(isIE)
    for (var i=0; i < bmarks.length; i++) {
      eval("document.all."+bmarks[i]+".style.left='"+markX[i]+"'");
      eval("document.all."+bmarks[i]+".style.top='"+markY[i]+"'");
    } 
  if (isNS) {
    //for (var i=0; i < bmarks.length; i++) {
	  //eval("document."+bmarks[i]+".moveTo("+markX[i]+","+markY[i]+")");
	  //alert(i+"n"+bmarks[i]+"n"+markX[i]+"n"+markY[i]);
      //eval("document."+bmarks[i]+".left="+markX[i]+"");
      //eval("document."+bmarks[i]+".top="+markY[i]+"");
    //}
	document.layers["a1"].moveTo(markX[0],markY[0]);
	document.layers["a2"].moveTo(markX[1],markY[1]);
	document.layers["a3"].moveTo(markX[2],markY[2]);
	document.layers["a4"].moveTo(markX[3],markY[3]);
	document.layers["a5"].moveTo(markX[4],markY[4]);
  }
} 
onload="placemarks()"
</script> 

Body Code:

<script>
writeDIVS();
initCookie();

if(isNS) { 
  document.a1.left=parseInt(60); 
  document.a1.top=parseInt(0); 
  document.a2.left=parseInt(12); 
  document.a2.top=parseInt(0); 
  document.a3.left=parseInt(24); 
  document.a3.top=parseInt(0); 
  document.a4.left=parseInt(36); 
  document.a4.top=parseInt(0); 
  document.a5.left=parseInt(48); 
  document.a5.top=parseInt(0); 
}
</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *