モエ（旧式）の取り扱い説明書

▲

画像移動ユーティリティー
「モエ（旧式）」

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

デモ (1)

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

使用方法の説明

最終更新プログラム : 99/05/05 取扱説明書 : 05/01/09

まず最初に「モエ」を手に入れる

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

下準備

モエ本体「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> </script>

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

ｍｏｅの引数について

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

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

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

第一段階の「まとめ」

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

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

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

デモ (2)

分かる人への補足　その１

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

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

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

<LAYER>タグと<SPAN>タグを使用しないで下さい。

便利な機能その１　「画像座標の表示」

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

<script> </script> >> <script> </script>

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

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

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

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

<script> </script> >> <script> </script>

デモ (3)

便利な機能その２　「ＡＬＴ属性」

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

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

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

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

位置固定(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)
（顔部分が位置固定で、ヅラ部分が位置復帰です。）