Moving Red Blob Following Mouse

[Total: 0    Average: 0/5]

This example has a red square that will follow the mouse where ever it goes.

Head Code:

<style>
.pic {background-color: #FF0000;}
</style>
<script>
var currImg = 0;
var imgNum = 0;
function moveImg(_e){
  if(_e)
  {
    document.getElementById("x"+currImg).style.top=_e.pageY;
    document.getElementById("x"+currImg).style.left=_e.pageX;
  }
  else
  {
    document.getElementById("x"+currImg).style.top=event.y;
    document.getElementById("x"+currImg).style.left=event.x;
  }
  currImg=(currImg+1)%imgNum;
}

function initImg(imgName, numbOfImg)
{
  imgNum = numbOfImg;
  var i;
  for(i = 0;i < numbOfImg;i++)
  {
    document.write("<img width=20 height=20 class='pic' id='x"+i+"' src="" + imgName + "">");

    document.getElementById("x"+i).style.position="absolute";
  }
}
</script>

Body Code:

<script>
initImg("/images/shim.gif", 9);
 if (!document.all) document.captureEvents(Event.MOUSEMOVE)
  document.onmousemove=moveImg;
</script>
<center>Move your mouse - see the images move.</center>

Times Viewed: 11

Leave a Reply

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