画像移動ユーティリティー
モエ(旧式)
モエを使用すると、ブラウザ上で画像を移動する事が出来るようになります。
この機能を使って着せ替え福笑いなどを、簡単に作る事が出来ます。

デモ (1)

モエはNN4IE4以降で使う事が出来ます。
マック版IEでモエを使うと時々フリーズしますが、これはマック版IEのバグですのでご注意下さい。
サイトで使用したり、コミケ等で販売する前あるいは直後あたりに、連絡 ed2008@ed8.jpサンプルを下さい。
連絡メールには、着せ替えを公開するURLも必ずお書き添え下さい。
サンプルは、指定URLまで取りに伺います。
よろしくお願いします。
使用方法の説明

最終更新
プログラム : 99/05/05
取扱説明書 : 05/01/09
まず最初に「モエ」を手に入れる

圧縮ファイル moe.zipをダウンロードして下さい。
Windowsの方は「右クリック→対象をファイルに保存」で保存。
解凍するとmoe.jsが出て来ます。
これがモエの本体です。

下準備

モエ本体「moe.js」を、HTMLファイルと同じディレクトリ(フォルダ)に移動します。
モエを使える様にする

さてここからはHTMLファイルの中の話になります。

<head></head>の間に<script src="moe.js"></script>を入れます。
これでモエの機能が使える様になります。

<head>

</head>

>>
<head>
<script src="moe.js"></script>
</head>


モエを書く場所

モエはJavaScriptなので、
<body></body>の間の、<script></script>に書かないと
文法エラーになっちゃいます。
まずはこんな感じに、モエを書く場所を用意します。

<body>




</body>

>>
<body>
<script><!--

//-->
</script>
</body>


何やら<!--//-->が余分に付いてますが、古いブラウザに対する作法なので何となく納得して下さい。
<!--の後と//-->の後は、絶対に改行して下さい。

一番簡単な書き方

moe ( ) ; という名前の関数に引数を渡します。
関数と引数について説明すると長くなっちゃうんで省略しますが、サンプルを見ると何となく分かると思います。(^-^
moe ( ) ;が関数で( )の中が引数です。
引数は「,」で区切ります。

<script><!---


//--->
</script>

>>
<script><!---
moe ( 0, 0, "00.gif" ) ;
moe ( 0, 0, "01.gif" ) ;

//--->
</script>


画像はmoe( )を書いた順に奥から手前に表示されます。
上の例では、00.gif01.gifが隠す事になります。

moeの引数について

の間に書いてある物が引数です。
引数はY座標X座標ファイル名の順番です。
省略は出来ません。

Y座標とX座標には数値を指定します。単位はドットです。
ブラウザ画面の左上が基点になります。
最初はとかの適当な数値を入れておいて下さい。
IEのバグで、数値を入れないと暴走する可能性があります。注意!

ファイル名には、GIF、JPEG、PNG等が指定出来ます。

第一段階の「まとめ」

今までのをまとめると、こんな感じになります。

<html>

<head>

</head>

<body>





</body>

</html>
>>
<html>

<head>
<script src="moe.js"></script>
</head>

<body>
<script><!--
moe ( 0, 0, "00.gif" ) ;
moe ( 0, 0, "01.gif" ) ;
//-->
</script>

</body>

</html>

これだけで、マウスで動かす事の出来る画像が2枚、ブラウザの左上に表示されます。

デモ (2)
分かる人への補足 その1

ブラウザには色々なバグがあります。
使用したら変になるタグと属性を書いておきますので、注意して下さい。

<IMG>タグを使用しないで下さい。
これは、NNのバグです。

<DIV><CENTER>などの位置補正タグで、<script>〜</script>を挟まないで下さい。
これは、IEのバグです。

<LAYER>タグ<SPAN>タグを使用しないで下さい。
便利な機能その1 「画像座標の表示」

モエには、画像の現在位置の座標を表示する機能があります。
<script></script>の間の最初にmoe_mark ( ) ;を書くと、適当な位置に座標を表示するが表示されます。

<script><!--

moe ( 0, 0, "00.gif" ) ;
moe ( 0, 0, "01.gif" ) ;
//-->
</script>
>>
<script><!--
moe_mark ( ) ;
moe ( 0, 0, "00.gif" ) ;
moe ( 0, 0, "01.gif" ) ;
//-->
</script>

moe_markはメモリを沢山使うので、サイトで公開したりする時には抜いておいて下さい。

マック版IEだとキチンと表示されないみたいです。
マックの人はNNを使って下さい。

座標表示機能の使用上の注意

ブラウザのバグで、初期位置でフォームに画像が重なってるとフォームが変な表示をしている場合があります。
そういう場合はこんな感じに、先に画像の初期位置を移動しておいて下さい。

<script><!--
moe_mark ( ) ;
moe ( 0, 0, "00.gif" ) ;
moe ( 0, 0, "01.gif" ) ;
//-->
</script>
>>
<script><!--
moe_mark ( ) ;
moe ( 100, 100, "00.gif" ) ;
moe ( 100, 100, "01.gif" ) ;
//-->
</script>

デモ (3)
便利な機能その2 「ALT属性」

moe ( ) ;の第4の引数で、普段は省略します。
<IMG>タグALT属性と同じ物です。

moe ( 0, 0, "01.gif" ) ;
>>
moe ( 0, 0, "01.gif", "ヅラで〜す♪" ) ;

便利な機能その3 「位置固定」と「位置復帰」

moe ( ) ;の第5の引数で、普段は省略します。

位置固定(0)を指定すると画像が動きません。

moe ( 0, 0, "00.gif", "かお" ) ;
>>
moe ( 0, 0, "00.gif", "かお", 0 ) ;

位置復帰(1)を指定すると移動はしますが、放すと元の位置に戻ります。

moe ( 0, 0, "01.gif", "ヅラ" ) ;
>>
moe ( 0, 0, "01.gif", "ヅラ", 1 ) ;

これらの機能を使う時には、ALT属性を指定しないといけません。
ALT属性が必要じゃない場合は「””」として下さい。

moe ( 0, 0, "00.gif", "かお", 0 ) ;
moe ( 0, 0, "01.gif", "ヅラ", 1 ) ;
>>
moe ( 0, 0, "00.gif", "", 0 ) ;
moe ( 0, 0, "01.gif", "", 1 ) ;

デモ (4)
( 顔部分が位置固定で、ヅラ部分が位置復帰です。 )