画像移動ユーティリティー
「モエ(旧式)」
|
モエを使用すると、ブラウザ上で画像を移動する事が出来るようになります。
この機能を使って着せ替えや福笑いなどを、簡単に作る事が出来ます。
デモ (1)
モエはNN4とIE4以降で使う事が出来ます。
マック版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.gifを01.gifが隠す事になります。
moeの引数について
(と)の間に書いてある物が引数です。
引数はY座標、X座標、ファイル名の順番です。
省略は出来ません。
Y座標とX座標には数値を指定します。単位はドットです。
ブラウザ画面の左上が基点になります。
最初は0とかの適当な数値を入れておいて下さい。
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)
( 顔部分が位置固定で、ヅラ部分が位置復帰です。 )
|