マウスが重なったときに画像のサイズを変える [ html / javascript ]

画像をはじめからでかでかと表示するのはいやなんだけど、必要に応じて拡大したい。

そんな希望を実現する方法で、簡単に埋め込めるのでお気に入りだったやり方を思い出したので忘れないうちに備忘録。

imgタグのonmouseoverとonmouseoutに直に簡単に仕込むだけ。エフェクトとかなくて味気ないけどライブラリも別のスクリプトも不要。スクリプトタグを跳ねるようになっているブログでもこのくらいなら使える可能性高いのではなかろうか。

表示したい画像

HTMLをこんな感じで記述

<img src=... width=最初に表示する時の幅   onmouseover="this.width=マウスが重なった時の幅"   onmouseout="this.width=マウスが外れた時の幅" />

widthじゃなくてheightでもいける。

サンプル: show source