ブログをつくる
アクセスランキング
【NEW】
アイデア満載のソーシャルブックマーク - トラリンク
田中家
« 前の記事へ
次の記事へ »
メモる田中
30
12
2007
今年一番のお気に入り！
「
CSS HappyLife
」で紹介されたロールオーバーのJavaScript。
画像ファイル名の最後に「_on」「_off」を付けるだけでロールオーバーが出来るという優れもの！
通常のロールオーバー設定よりも、ソースがスッキリするのでロールオーバーを必要とする時は結構利用させてもらってます。
利用方法は下記の通り。
◇JavaScriptを外部ファイルに保存する
function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover);
◇外部ファイルを読み込む
<script type="text/javascript" src="上記jsファイル"></script>
あとは「_on」「_off」を付けた画像を用意して「_off」の画像をhtmlファイルに記述すればロールオーバーします。
「
CSS HappyLife
」でjsファイルのダウンロードや詳しい説明が記載されています。
■ロールオーバー
http://css-happylife.com/log/javascript/000157.shtml
トラックバック
こちらの記事へのトラックバックは下のURLをコピーして行ってください。
トラックバックは管理者による承認後に掲載されます。
コメント
この記事へのコメントはありません。
コメントは管理者による承認後に掲載されます。
田中
プロフィール
最近の記事
ファイブミニ キャン…
ワンクリックで、世界…
カテゴリ別アーカイブ
田中家の街（1）
サイトを見る田中（8）
メモる田中（5）
調べる田中（4）
観る田中（1）
遊ぶ田中（2）
買う田中（1）
壊す田中（2）
Web検
Webリテラシー練習問題
MyMiniCity
«
2007年 12月
»
日
月
火
水
木
金
土
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
31
月別アーカイブ
2008年04月（1）
2008年03月（5）
2008年02月（2）
2008年01月（7）
2007年12月（7）
2007年11月（2）
