複数の透過GIFイメージを重ねて一枚のイメージを作るには？？

複数の透過GIFのイメージを用いて一枚のイメージを作ろうとしているのですがうまくいきません。

輪郭と目と口と鼻の透過GIFを用意しました。
Javascriptを使ってクリックするごとに各イメージを重ね合わせようとしました。

document.イメージ.src="イメージファイル名"

ではすべて書き換えになってしまいます。
重ね合わせるにはどうしたらよいか教えてください。
よろしくお願いします。

No.2 回答者： fujillin 回答日時： 2008/11/12 10:10

No4459844の回答例を見ていただければわかりますように、CSSで

position:absoluteを指定しておくことで、表示位置の指定が可能になります。　（回答例のdivの部分を画像だと考えて、みてください）
2つ以上の画像を、重なるように位置指定すればよいはずですが？
重ねる場合は、必要に応じてz-index:も指定しておいた方が良いかもしれません。

＞document.イメージ.src="イメージファイル名"ではすべて書き換えになっ
＞てしまいます
↑は指定した画像を、別の画像に置き換える処理ですので、当然その画像は置き換わります。
一部だけ入れ替える命令ではありませんし、そのような命令はありませんので、どうしてもこの方法でやりたい場合は、"イメージファイル名"で指定した画像を、重なった状態の画像にしておけばよいのでは？

画像を入れ替える以外の方法として、画像の表示/非表示を切り替えるという方法もあります。（前回の回答例はその方法）
最初から画像を重ねておいて、非表示にしておいて、後で表示するという方法です。
CSSのdisplay:block/none を利用することで表示の切替えが可能です。
また、台紙も同様に切り分けておけば、必ずしもクリッカブルマップにしなくても、onclickの処理だけでもできそうですね。（どちらでも良いですけど）

ちなみに、福笑いみたいに、乗せる画像の位置を制御したりすることも可能です。
がんばってください。

この回答へのお礼

ご丁寧にありがとうございます！！
クリッカブルマップもをもちいてなんとか自分の思っていた通りに動かすことができました！！

お礼日時：2008/11/13 22:02

No.1 回答者： yambejp 回答日時： 2008/11/12 09:13

スタイルシートで位置の重ね合わせをしてください

この回答へのお礼

ありがとうございます。
なんとか解決できました！

お礼日時：2008/11/13 22:00