質問: jsでマウスオーバー時に画像拡大、変更、縮小したい javascriptを使用し、 画像をマウスオーバーした時に拡大させ、 拡大しきった時に画像を変更、 マウスアウトすると再度元の画像に戻り、 縮小して元すべて通りになる、 という機能を実装したいのですが、 ご指導頂けますでしょうか。 (ブラウザはie6を使用しています) 宜しくお願い致します。
回答: 全部書いていると長くなるのと、どのあたりがわからないのか不明なので... まず、 1)画像にマウスオーバーしたら単純に拡大、マウスアウトで縮小というものを作ってみる。 (アニメーションなし) 2) 1)の拡大画像の時に画像を変更するものに修正してみる。 (アニメーションなし) 3)画像にマウスオーバーしたら、アニメーションで拡大するものを作る。 4) 3)のアニメーション部分を縮小にも使えるように修正する。 (増分を+/-でも使えるようにする) 5) 3)のマウスオーバーに加えて、マウスアウトで元のサイズになるように修正。 (アニメーションあり) 6) 2)と5)を合成して、一応、ご質問の機能のものが作れるかと思います。 さらに、 7) 6)をオブジェクト化するなどの方法で、複数の画像にも使えるようにする。 というようなことを試みてみて、ゆきずまったところで具体的な質問をなさるのがよろしいかと。 (ライブラリ(jqueryなど)を利用すると、比較的簡単にできるかも知れません)