ホームページ作成中技集

トップページへ戻る　　　 ホームページ作成小技集へ

宝探し

まずは、ここをクリックして、動作を確認してください。
※IE5.5/IE6.0では動作を確認しましたが、ネットスケープなどの他のブラウザでは動作を確認していませんので、正常に動作するかどうか不明です。あらかじめご了承ください。

メモ帳などで、htmlファイルを開き、下に示したソースコードの（赤＋黒）文字部分を<head>〜</head>の間の任意の位置に挿入し、（青＋黒）文字部分を<body>〜</body>の間の任意の位置に挿入してください。
黒文字部分が、ユーザー毎に変更すべき箇所です。

<html>
<head>

<script language="JavaScript"><!--

MDOWN=0;　//画像の上でマウスが押されているかどうか判定する。0:オフ　1:オン
GIFX=120;　//画像のＸ座標
GIFY=90;　 //画像のＹ座標
OFFX=0;　　//画像のＸ座標からマウスのＸ座標までの距離
OFFY=0;　　//画像のＹ座標からマウスのＹ座標までの距離

if(document.getElementById){
　　　　 document.onmousemove=mousemove;
}
function mousedown(e){
　　　　 if(!e)e=window.event;
　　　　 OFFX=e.clientX-GIFX;
　　　　 OFFY=e.clientY-GIFY;
　　　　 MDOWN=1;
}
function mousemove(e){
if(!e)e=window.event;
if(e.button==1 && MDOWN==1){
　　　　 document.ueki.style.left=GIFX=e.clientX-OFFX;
　　　　 document.ueki.style.top=GIFY=e.clientY-OFFY;
　　　　 event.returnValue = false;
}
else MDOWN=0;
}
//--></script>

</head>
<body>

<p style="position:absolute;left:150px;top:130px" ><a href="http://www.remus.dti.ne.jp/~koutune/tec2.html"><font size="3"><strong>戻る</strong></font></a></p>
<Img Src="ueki.gif" name="ueki" onMouseDown="mousedown()" style="position:absolute;left:120px;top:90px">

</body>
</html>

黒文字部分の詳細は以下の通りです。

GIFX=120;　　⇒重ねる画像のＸ座標
GIFY=90;　 　⇒重ねる画像のＹ座標

<p style="position:absolute;left:150px;top:130px" >
<a href="http://www.remus.dti.ne.jp/~koutune/tec2.html"><font size="3"><strong>戻る</strong></font></a></p>
　　　　⇒ 左から順番に、”戻る”を配置する位置（leftがＸ座標,topがＹ座標）、”戻る”のアドレス、”戻る”の大きさ、文字

<Img Src="ueki.gif" name="ueki" onMouseDown="mousedown()" 　style="position:absolute;left:120px;top:90px">
　　　　⇒左から順に、重ねる画像のファイル名、画像のＸ座標、画像のＹ座標

目次へ