WAIWAI BLOG
【ブログ・HTML】マウスオーバーで画像を変更表示
- Prev Page: 【ブログ作成】Movable Type 4設置（インストール）
画像にマウスを乗せた際に、画像が変わるようにしたり、
ちょっと動きを付けたりする事ができます。
どんな感じになるのかは見た方が早いと思いますので、
続きをどうぞ
マウスオーバーで画像を変更
※それぞれの画像にマウスを合わせて下さい。
こんな感じでマウスオン時に画像が変わります。
一番右側の画像はGIFのアニメーションを組み合わせる事で、
表現を豊かしています(≧Ｖ≦)ﾉ
簡単にできますの実践してみて下さいね☆
通常の画像タグ
<img alt="サンプル" width="80" height="80" src="画像URL">
マウスオーバーで画像変更する場合のタグ
<img alt="サンプル" width="80" height="80" src="元の画像URL"onmouseover="this.src='マウスオン時の画像URL';" onmouseout="this.src='元の画像URL'" />
いつもの画像タグに【onmouseover="this.src='マウスオン時の画像URL';"
onmouseout="this.src='元の画像URL'"】
を付けるだけ
Comments(0)
No comments found.
Post a Comment