スポンサーサイト





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

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

マウスオーバーで画像変更





マウスをのせると違う画像に変わる小技です。





マウスポインタがのると「onMouseOver」イベントが発生し、マウスポインターが離れると「onMouseOut」イベントが発生します。

そこで、onMouseOverイベントで画像を切り換え、onMouseOutイベントで元の画像に戻すと、マウスをのせたときだけ画像が変わるという面白い効果を発生させることができます。

「this.src='画像URL'」となっている点にも注意です。


ソースです。

<html>

<head>

</head>

<body>

<img src="http://blog-imgs-45.fc2.com/j/a/v/javascriptmania/sakamoto_ryoma.jpg"
onMouseOver="this.src='http://blog-imgs-45.fc2.com/j/a/v/javascriptmania/ryoma.jpg'"
onMouseOut="this.src='http://blog-imgs-45.fc2.com/j/a/v/javascriptmania/sakamoto_ryoma.jpg'">

</body>

</html>
関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/8-65aa1619
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。