Current Location: Home->Tutorials->Javascript->Game
Please note that the use of the scripts on this page can cause conflicts with W3C's WCAG 1.0 accessibility guidlines. This is due to the
fact that a mouse is required. However you can remedie mouse functions (exept on mouseover) using calls such as onfocus
along side them. I have only put these scripts here for informational purposes, i strongly recommend sticking to W3C's guidelines.
Mouse Functions(1): -eg. click any where in this area!
<script type="text/javascript">
ml = new Point(-500,-500);
function Point(x,y)
{
this.x=x;
this.y=y;
}
function mouseloca()
{
ml.x = event.x + document.body.scrollLeft;
ml.y = event.y + document.body.scrollTop;
}
function tellmemouselocation()
{
mouseloca();
alert("MOUSE LEFT:"+ml.x+" MOUSE TOP:"+ml.y);
}
</script>
and finaly in the body text <div onClick="tellmemouselocation();">your div contents here</div>
- Simple Javascript to show a message box to show mouse top and left position:
<script type="text/javascript">
ml = new Point(-500,-500);
function Point(x,y)
{
this.x=x;
this.y=y;
}
function mouseloca()
{
ml.x = event.x + document.body.scrollLeft;
ml.y = event.y + document.body.scrollTop;
}
function tellmemouselocation()
{
mouseloca();
alert("MOUSE LEFT:"+ml.x+" MOUSE TOP:"+ml.y);
}
</script>
and finaly in the body text <div onClick="tellmemouselocation();">your div contents here</div>
Mouse Functions(2):
<script type="text/javascript">
ml = new Point(-500,-500);
yn = new Yesno('1');
function Point(x,y)
{
this.x=x;
this.y=y;
}
function Yesno(mtoo)
{
this.mtoo=mtoo;
}
function mouseloca()
{
ml.x = event.x + document.body.scrollLeft;
ml.y = event.y + document.body.scrollTop;
}
function movemeobject()
{
mouseloca();
if(yn.mtoo=='2')
{
mmo.style.left=ml.x*1-210;
mmo.style.top=ml.y*1+400;
}
}
function teea(numgr)
{
yn.mtoo=numgr;
}
</script>
and finaly in the body text <div onmousemove="movemeobject();"><div style="position:absolute;" onClick="javascript: if(yn.mtoo=='1'){teea(2);} else{teea(1);}"> your div or other object to move</div></div>
-eg. click this area!
- Simple Javascript to move selected object to mouse location, and drop it at new mouse location:
<script type="text/javascript">
ml = new Point(-500,-500);
yn = new Yesno('1');
function Point(x,y)
{
this.x=x;
this.y=y;
}
function Yesno(mtoo)
{
this.mtoo=mtoo;
}
function mouseloca()
{
ml.x = event.x + document.body.scrollLeft;
ml.y = event.y + document.body.scrollTop;
}
function movemeobject()
{
mouseloca();
if(yn.mtoo=='2')
{
mmo.style.left=ml.x*1-210;
mmo.style.top=ml.y*1+400;
}
}
function teea(numgr)
{
yn.mtoo=numgr;
}
</script>
and finaly in the body text <div onmousemove="movemeobject();"><div style="position:absolute;" onClick="javascript: if(yn.mtoo=='1'){teea(2);} else{teea(1);}"> your div or other object to move</div></div>
