Click to Move Image

[Total: 0    Average: 0/5]

This shows how to have an image become moveable by clicking on it.

Body Code:

<script>
var isNS4 = document.layers?true:false;
var isIE = document.all?true:false;
var isNS6 = !isIE && document.getElementById?true:false;
if (isNS4)
  document.write('<layer id=ball style="position:absolute;top:0:left:0"><a onmouseover="status='Click to move the ball';return true;" href="javascript:clk()"><img width=30 height=30 src="/js/pic1.gif" border=0></a></layer>');
if (isIE||isNS6)
  document.write('<div id=ball style="position:absolute;top:0:left:0"><a onmouseover="status='Click to move the ball';return true;" href="javascript:clk()"><img width=30 height=30 src="/js/pic1.gif" border=0></a></div>');
var DRAG = false;
var offsetX = 15;// 1/2 the image width
var offsetY = 15;// 1/2 the image height
function clk() {
  DRAG = !DRAG; if(!DRAG) status="I've been moved!";
}

if (isNS6) document.addEventListener("mousemove", getMousePosition, true);
if (isNS4) document.captureEvents(Event.MOUSEMOVE);
if (isIE||isNS4)document.onmousemove=getMousePosition;
function getMousePosition(e) {
  if(!DRAG) return;
  if (isNS4) {
    document.ball.x=e.pageX-offsetX;
    document.ball.y=e.pageY-offsetY;
  }
  if (isNS6)
  {
    document.getElementById("ball").style.top=e.pageY-offsetY;
    document.getElementById("ball").style.left=e.pageX-offsetX;
  }
  if (isIE) {
    document.all.ball.style.posLeft=event.x-offsetX;
    document.all.ball.style.posTop=event.y-offsetY;
  }
}
</script>

Times Viewed: 2

Leave a Reply

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