マウスオーバーで画像の一部を切り替え html

質問

html初心者です。
ホームページで写真の画像の中のある物体にマウスカーソルを合わせるとその画像の物体の部分が違う画像に切り替わり、他のページにリンクするようにしたいのですがどのような方法があるでしょうか？
ちなみに切り替えたい部分は7つあります。

回答No.1

4649panda · ベストアンサー

7つの全ての部分が1枚の画像の中にあるのでしたら、イメージマップで対応することになると思います。
確実なのは、元の画像+切り替わった後の画像(7枚)を作って、javascriptのマウスイベントで処理するといいと思います。
切り替わる物体のみの画像ではなく、各1つずつの物体が切り替わった後の元のサイズの画像が7枚です。
(元の画像、1つめの物体だけが切り替わった画像、2つめの物体だけが切り替わった画像……　7つめの物体だけが切り替わった画像、という感じで同じサイズの画像が合計8枚)

javascriptは自信がないのでコードは書きませんが、onClick, onMouseover, onMouseoutを使うと思います。
例えば、もともとの画像があり、1つめの画像にマウスが乗ると(onMouseover)1つめの画像だけが切り替わった画像に変り、そこからマウスが離れると(onMouseout)元の画像に戻る。クリックすると(onClick)リンク先へ移動。