Home > スポンサー広告 > マウスオーバーが簡単にできるJavaScript(smartRollover.js編)

スポンサーサイト

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

Comments: -

Comment Form
Only inform the site author.

Trackback+Pingback: -

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/19-a526eebf
Listed below are links to weblogs that reference
スポンサーサイト from Memoのメモ

Home > スポンサー広告 > マウスオーバーが簡単にできるJavaScript(smartRollover.js編)

Home > web小技 > マウスオーバーが簡単にできるJavaScript(smartRollover.js編)

マウスオーバーが簡単にできるJavaScript(smartRollover.js編)

  • Posted by: tomoko
  • 2009-08-13 Thu 20:32:22
  • web小技
DWのロールオーバーだと、ソースが美しくない
・・・というか、分かりにくくなるので、なんとか回避したいと思ってました。

かといって、いちいち長々とCSSを書くのも面倒くさいので、
汎用性のあって簡単な方法をさがしてみました。



●JSを使ったマウスオーバー(smartRollover.js)


2枚の画像を切り替えて、表示する方法です。

1.JSを用意

以下よりダウンロード。
smartRollover.js


2.JavaScriptを読み込ませる

適当な場所において、該当のページに読みこませるようにします

<header>タグ内に、以下のような記述を追加します。

<script type="text/javascript" src="scripts/smartRollover.js"></script>


2.画像を用意する

通常画像のファイル名:***_off.jpg(拡張子は他でもOK)
マウスオーバー時のファイル名:***_on.jpg(拡張子は他でもOK)



以上です。
これだけです。



class指定を書き足したりしなくてもいいのと、
ソースがとてもシンプルなので愛用してます!

「on」「off」というのが直感的にも分かりやすくて間違いにくいのも嬉しいです。
そして、html上は、画像ファイル名だけというシンプルさが何より!




それでも面倒くさい時、
たとえば、同じようなロールオーバー処理が続いて、
わざわざマウスオーバー用画像を作るのが面倒くさい場合はこちら。




関連サイト

スポンサーリンク

Comments: 0

Comment Form
Only inform the site author.

Trackback+Pingback: 0

TrackBack URL for this entry
http://kyotomemo.blog99.fc2.com/tb.php/19-a526eebf
Listed below are links to weblogs that reference
マウスオーバーが簡単にできるJavaScript(smartRollover.js編) from Memoのメモ

Home > web小技 > マウスオーバーが簡単にできるJavaScript(smartRollover.js編)

最近読んだ本

Return to page top

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