jsでマウスオーバー時に画像拡大、変更、縮小したい

質問

javascriptを使用し、
画像をマウスオーバーした時に拡大させ、
拡大しきった時に画像を変更、
マウスアウトすると再度元の画像に戻り、
縮小して元すべて通りになる、
という機能を実装したいのですが、
ご指導頂けますでしょうか。
(ブラウザはIE6を使用しています)

宜しくお願い致します。

回答No.1

fujillin · ベストアンサー

全部書いていると長くなるのと、どのあたりがわからないのか不明なので…

まず、
1）画像にマウスオーバーしたら単純に拡大、マウスアウトで縮小というものを作ってみる。
　（アニメーションなし）

2）　1）の拡大画像の時に画像を変更するものに修正してみる。
　（アニメーションなし）

3）画像にマウスオーバーしたら、アニメーションで拡大するものを作る。

4）　3）のアニメーション部分を縮小にも使えるように修正する。
　（増分を+/-でも使えるようにする）

5）　3）のマウスオーバーに加えて、マウスアウトで元のサイズになるように修正。
　（アニメーションあり）

6）　2）と5）を合成して、一応、ご質問の機能のものが作れるかと思います。

さらに、
7）　6）をオブジェクト化するなどの方法で、複数の画像にも使えるようにする。

というようなことを試みてみて、ゆきずまったところで具体的な質問をなさるのがよろしいかと。
（ライブラリ（jQueryなど）を利用すると、比較的簡単にできるかも知れません）

お礼

fujillinさん

有難うございます。

（いつも）質問が抽象的で申し訳ありません。。
ご教示頂いた内容を元に、
ちゃんと人に伝わる情報を発信できるよう、
諦めずに努力したいと思います。

今後とも、宜しくお願い致します。