【JavaScript】マウスで画像を動かす方法
宝さがしゲーム
ソースコードは以下の通りです。コピペ自由。
|
<html>
<head>
<script language="JavaScript"><!--
MDOWN=false; //画像の上でマウスが押されているかどうか判定する。0:オフ 1:オン
GIFX=120; //画像のＸ座標
GIFY=90; //画像のＹ座標
OFFX=0; //画像のＸ座標からマウスのＸ座標までの距離
OFFY=0; //画像のＹ座標からマウスのＹ座標までの距離
document.onmousemove=mousemove;
document.onmouseup=mouseup
function mousedown(){
OFFX=event.clientX-GIFX;
OFFY=event.clientY-GIFY;
MDOWN=true;
}
function mousemove(){
if(MDOWN==1){
document.ueki.style.left=GIFX=event.clientX-OFFX;
document.ueki.style.top=GIFY=event.clientY-OFFY;
event.returnValue = false;
}
else MDOWN=false;
}
function mouseup(){
MDOWN=false;
}
//--></script>
</head>
<body>
<p style="position:absolute;left:150px;top:100px" ><img Src="okane_18.jpg" /></p>
<Img Src="ueki.gif" alt="フラワーバスケット1" style="position:absolute;left:10px;top:90px">
<Img Src="ueki.gif" alt="フラワーバスケット2"name="ueki" onMouseDown="mousedown()" style="position:absolute;left:120px;top:90px">
<Img Src="ueki.gif" alt="フラワーバスケット3" style="position:absolute;left:10px;top:180px">
<Img Src="ueki.gif" alt="フラワーバスケット4" style="position:absolute;left:120px;top:180px">
<Img Src="ueki.gif" alt="フラワーバスケット5" style="position:absolute;left:10px;top:270px">
<Img Src="ueki.gif" alt="フラワーバスケット6" style="position:absolute;left:120px;top:270px">
</body>
</html> |
GIFX=120; は、フラワーバスケットのＸ座標
GIFY=90; は、フラワーバスケットのＹ座標
OFFXは、マウスポインタのＸ座標
OFFYは、マウスポインタのY座標
mousedownは、マウスが押下されたとき呼び出される関数
mousemoveは、画像をマウスでドラッグしたときに呼び出される関数
mouseupは、画像からマウスを話したときに呼び出される関数
フラワーバスケット2の画像に、name="ueki"タグと、マウスをクリックしたときに呼び出す onMouseDown="mousedown()"をセット。
TOP