★　ウェイトレス満月ちゃんのしくみ　★

●画像や文字の上にマウスカーソルを置くと、満月ちゃんの表情（画像）が変わる。

では、画像を最低ふたつ用意して下さい。待受用と、変えた時用の画像です。同じサイズでお願いします。
今回は、先代のウェイトレス満月ちゃんに登場していただきます。

初期 営業スマイル

「初期」を待受用、「営業スマイル」を変えた時用にします。
今回ｇｉｆ画像ですが、他の形式でも対応出来ると思います。
ただ、「初期」が動画ｇｉｆで作りたかったので、たまたまそうなっています。
　★ちなみに、まばたきするの（動画）は某有名恋愛シュミレーションゲームのアイデアの「パクリ」です。
　　チーフがコレがあるだけでものすごく違う！と熱弁されてたので、アイデア使ってみました。
　　ごめんなさい。すごく、いいと思いますｖ


●　実際何をしたらいいのか。
　下記の文を加えます。場所に注意してください。

青の文字は適当に自分で決めるもの、橙の文字はその都度決まっているもの、黒は大体変えないものって感じです。
　（「↓」の以降の、ひとつのかたまりが解説になります。実際書いちゃダメです。）

★<HEAD>以降　（<HEAD>　</HEAD>内）
　<SCRIPT language="javascript">
　<!--

　　var mitu1 = new Image();
　　var mitu2 = new Image();
　　↓
　　画像を入れる場所を作ってます。
　　適当につけた名前で、「画像用の場所」を作ってます。
　　画像を２コ使うので２コ場所を作ります。


　　mitu1.src = "初期";
　　mitu2.src = "営業スマイル";
　　↓
　　・mitu1　に　初期（待受の画像）　を入れます。
　　・mitu2　に　営業スマイル（変えたときの画像）　を入れます。
　　上で作った場所に使う画像を入れます。
　　"初期"等には実際に使う画像の絶対アドレスを書いてください。
　　画像を使う際はmitu1やmitu2という、こっちの名前で使います。


　　function syoki(){ document.mitu0.src = mitu1.src;}
　　function smile(){ document.mitu0.src = mitu2.src;}
　　↓
　　・syoki()　を実行すると、mitu0 に　mitu1　を入れます。
　　・smile()　を実行すると、mitu0 に　mitu1　を入れます。
　　syoki()　や　smile()　を実行するタイミングは後で出てきます。
　　※mitu0　も後で出てきます。ココではスルーして下さい。


　//-->
　</SCRIPT>
★</HEAD>以降　（<BODY>　</BODY>内）
（すぐに）
　<BODY onload = "syoki()">
　↓
　・ページを読み込むと同時に、syoki()　を実行。


（カーソルを上に置きたい場所（が文字の場合）に）
　<A onmouseover = "javascript:smile()" onmouseout = "javascript:syoki()" >笑顔が素敵だね★</A>
　↓
　・笑顔が素敵だね★　という文字の上にマウスが来た時　smile() を実行。
　・笑顔が素敵だね★　という文字の上からマウスが離れた時　syoki()　を実行。
　onmouseover　や　onmouseout　は多分ＨＴＭＬの領域でないかと（←おい）　まぁ･･そのままですね。
　onmouseout　の時の処理も指定しないと（自動では戻らないので）ずっと表情が変わったままになっちゃいます。

（画像を貼り付けたい場所に）
　<IMG name="mitu0" width="170" height="329" border="0">
　↓
　mitu0　という場所を作ってます。
　実際に、満月ちゃん（画像）を置きたい所に作ってください。
　高さと幅は満月ちゃんの画像の大きさ。（だから前回出てきたサイズと同じです。）
　border="0"　は画像の枠線。ＨＴＭＬの領域ですか。

以上の事を加えると、下記のようになります。
笑顔が素敵だね★

この一連の処理は、
mitu0　という場所に "初期"（待受の画像・mitu1）や "営業スマイル"（変えた時の画像・mitu2）を
マウス操作（笑顔が素敵だね★　という文字の上にマウスを乗せる・離す）により
入れ替えている、と言う事です。

･･ぱに☆かふぇに入る時のジョナサンドア〜も同じ要領です。
カーソルがドアの上に来た時、一度だけ開くドアの画像と入れ替えています。

●最後に、店頭での吹きだしも同時に変える場合を。
　上のものと比べてみてください。

★<HEAD>以降
　<SCRIPT language="javascript">
　<!--
　　var mitu1 = new Image();　var mitu2 = new Image();
　　var fuki1 = new Image();　var fuki2 = new Image();
　　mitu1.src = "初期"; mitu2.src = "営業スマイル";
　　fuki1.src = "初期時吹きだし画像"; fuki2.src = "スマイル時吹きだし画像";
　　function syoki(){ document.mitu0.src = mitu1.src; document.fuki0.src = fuki1.src;}
　　function smile(){ document.mitu0.src = mitu2.src; document.fuki0.src = fuki2.src;}
　//-->
　</SCRIPT>
★</HEAD>以降、下記以外変化なし。
（吹きだしを貼り付けたい場所に追加してください。）
　<IMG name="fuki0" width="??" height="??" border="0">

fuki0という場所に、syokiの場合fuki1、smileの場合fuki2を入れる処理を追加しました。
店頭では、全部で５つの表情の満月ちゃんと、項目の数だけ吹きだしの画像を使ってます。

･･コレは何？な感じに　ワンポイント。
function syoki(){ 　}
　↓
　何度か出てきた　function　は関数、というものです。何度も同じ処理をするような時に使えます。
　syoki()を実行しなさい、とするだけで　{ 　}内に書いて命令しておいた処理を実行します。
　使う事によって、何度も同じ文を書かずに済みます。プログラムが見やすくもなります。
　{　}内の処理は自分で決められます。
　今回は一つの命令（　mitu0 に　mitu1を入れること、等）しかしてないですが複数の命令でも大丈夫です。
　長いプログラムになればなるほど力を発揮します。
☆　使い方　☆
<HEAD>　</HEAD>内で使う
syoki();
　↓
　これだけ。
<BODY>　</BODY>内で使う
<BODY onload = "syoki()">
　↓
ページを開いたと同時にsyoki()を実行。

<IMG src="画像" width="幅" height="高さ" border="0"
　onmouseover="javascript:smile()" onmouseout="javascript:syoki()">
　↓
　画像の上にマウスが乗った時smile()を実行。
　画像の上からマウスが離れた時syoki()を実行。
　※このページでやっている、文字の上にマウスを乗せる・離す　により〜の、画像対象の時です。

<IMG name="mitu0" onclick="javascript:window.close()">
　↓
　mitu0　という場所（画像）をクリックした時window.close()を実行（窓を閉じる）
　クリックした時〜は↓でも出来ます。違いは･･やってみてください★
　<A href="javascript:window.close()"><IMG name="mitu0"></A>

文字の場合
<A onclick = "javascript:syoki()" ><FONT size="2">笑顔が素敵だね★</FONT></A>
　↓
　笑顔が素敵だね★をクリックした時syoki()を実行。
　もちろんコレ↓でも◎
　<A href = "javascript:syoki()" ><FONT size="2">笑顔が素敵だね★</FONT></A>