負けてたまるか。

脳トレ、プログラミング、PHP、WEB製作などのメモ

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- --:-- | スポンサー広告 | トラックバック(-) | コメント(-) | Edit


main main2

マウスカーソルを画像の上に重ねると、画像が入れ替わるロールオーバー画像の作成が今回のお題です。

ロールオーバー画像はonmouseoverと、onmouseoutの2つのイベントを使って作ります。

書式

onmouseover="処理" … マウスカーソルが画像の上に乗ったとき
onmouseout="処理" … マウスカーソルが画像から離れたとき


ソース

<img src="main.gif" width="213" height="240" border="0" onmouseover="this.src='main2.jpg' "onmouseout="this.src='main.gif'">
src … 画像のソースを記述
width … 画像の横幅
height … 画像の縦幅
border … 画像の枠線(ボーダー)の太さ
onmouseover … マウスカーソルが上にのったとき
onmouseout … マウスカーソルが離れたとき

this.src … このタグのsrcの中身を指定。
この場合は<img>タグ内のsrc要素の画像アドレス(xxx.jpg)を書き換える。


サンプル


関連記事












管理者にだけ表示

トラックバックURL↓
http://taro4.blog37.fc2.com/tb.php/15-e4f58f6f

| ホーム |

カレンダー

03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

最近の記事

月別アーカイブ

タグリスト

ブログ内検索

カテゴリー

RSSフィード

リンク

ブロとも申請フォーム

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。