miximixi

ソースがシンプルなJSによるロールオーバー

06月21日（木）00:10

category
JavaScript

Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です）

さて、本題に。

CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。
ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。

---- こっから続き

jsファイルのご用意

何はともあれ、下記のjsファイルをご用意します。

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);
}

ダウンロードしたい方は以下より。
smartRollover.js

んで、コレを外部ファイルとして読み込ませる。
こんな感じで。

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

記述する場所はhead要素内でございます。

画像のご用意

通常時の画像と、ロールオーバー時の画像を別々で用意して、以下のようにファイル名の最後に「_on」「_off」とつけます。

  • menu_on.gif
  • menu_off.gif

ソース

_offの画像をご自由に指定します。

<p>
<a href="/"><img src="./menu_off.gif" alt="HOME" /></a>
</p>

サンプルページ

サンプルページで実際の動作を見てみる

仕様とか

JSに関しては殆ど無知なんで、知り合いに頼んで作ってもらった訳でございますが、取りあえず、ファイル名の最後に「_off」ってついてる場合、同名の「_on」のファイルに入れ替わるって感じです。
ですので、間違って_offってファイル名に付けた場合_onを探しにいって×とか出る可能性があるのでご注意を。
サンプルはgifですが、jpgとかpngとかでもOKです。

よく見るロールオーバーのサンプルだとソースがごちゃごちゃしてていけてなかったからJSでのロールオーバーを敬遠してたけど、コレならソースもシンプルなのでいいなーと思った感じです。

ご注意事項とか

  • 改変とかはご自由にどうぞ。
  • 使用用途に関しても制限無しです。ご自由にどうぞ。
  • 万が一コレが原因で何らかの問題が発生しても、ウチでは一切の責任を取りません。
  • 使用に関しては自己責任でお願いします。
各種SBMに追加
  • Hatenaブックマークに追加
  • del.icio.usに追加
  • POOKMARK Airlinesへ追加
  • livedoorクリップへ追加
  • ニフティクリップへ追加
  • newsingへ投稿
  • Saafブックマークへ追加
  • Redditへ追加
[PR] SwapSkills for The Happy Web Weekend

Track Back [6]

jQueryのプラグイン、jQuery_Autoで画像のロールオーバー

CSS HappyLifeさんでjavascriptによるイメージロ...

by Webtech Walker｜2007年06月21日（木）

[javascript] JS でロールオーバー

(ネタです＞＜) これを見て http://css-happylife.com/log/javascript/000157.shtml 自分も書いてみた...

by IT戦記｜2007年06月21日（木）

JavaScriptメモ(３)：しんぷるロールオーバー

■シンプルなロールオーバー ＜headまたは外部JSファイル内＞function smartOver() { smartRollover('tes'...

by Le Arche｜2007年06月28日（木）

知っているとうれしいJavaScriptリテラル

ロールオーバー｜CSS HappyLife
↑のサイトのコメント欄では少々舌足らずになってしまったので若干の補足を。
JavaScriptはCやJavaに文法が似ているように見えて、実は特有のリテラ...

by 文系大学的IT系の悲哀｜2007年06月29日（金）

Javascriptライブラリ＆Tips紹介記事のまとめ

以下の記事にて、グラフィック関連、グラフ関連、カレンダー関連、エフェクト関連な...

by 仕事の効率を上げる blog｜2007年08月06日（月）

JavaScript でロールオーバー

ロールオーバー｜CSS HappyLife と言う記事を発見したので試してみました。 サンプルペー...

by Bowz::Notebook｜2008年03月12日（水）

comment [12]

1 - ぴんどめ さん

CSS でロールオーバーを実装する場合、画像に display: none; や visibility: hidden; や絶対配置して text-indent を指定することが多いと思います。これだと alt 属性が読み上げられない可能性があったり画像を表示しないブラウザでワケが分からなくなったりします。

それで、個人的にはロールオーバーはむしろ JavaScript で実現したほうが良いのではないかと考えています。ロールオーバーはあくまでも付加機能である、という感じです。

2007年6月21日 09:39

2 - moorning さん

略語でないものを大文字で記載することは間違いではないと言いたくて仕方ありません。実際、略ではありませんが"World Wide Web"のことを表していますして、通称ってところでしょうか。

2007年6月21日 22:09

3 - て さん

JavaScriptでもCSSでも同じですが、マウスが乗った時に
画像を読み込みにいくと
回線が細い人たちが見た場合うまく機能しないような気がします。
サンプルのように、先に画像を読み込んでおけばスムーズに動きますが、ロールオーバー画像の多い画面だと回線が細い人たちはロードに時間がかかりそうですね。

個人的には、一部透明な画像をCSSで背景色変更する方法でロールオーバするのが好きです。

2007年6月22日 02:36

4 - Lios K さん

JavaScript5行目の
if(images[i].getAttribute("src").match("_off."))
のmatchの引数に渡されている文字列は正規表現として解釈されますので、例えば、'soccer_offside.jpg'などのファイルの'_offs'にもヒットしてしまいます。8行目と11行目のreplaceの第一引数も同様。

match("_off\\.")やmatch(/_off\./)にしないと期待した動作はしないと思います。

URL｜2007年6月25日 15:19

5 - hira@管理人 さん

>Lios K さん
ご指摘ありがとうございます。
修正したVerにしておきました。

2007年6月25日 15:36

6 - purazumakoi さん

jsファイルをDLさせていただきました。ありがとうございます！
私もあまり詳しくないのですが、
そのままでは私の環境では動作しなかったので、

("_off\\.")の部分を(/_off\./)にしたら動作しました。

ご報告までに(^-^;

2007年6月26日 14:14

7 - hira@管理人 さん

>purazumakoi さん
あれれ、、何か間違ってたかな。。。また追ってなおしておきます。

ご報告ありがとうございます。

2007年6月27日 10:15

8 - tsu さん

いつも参考にさせていただいております。
修正版jsをDLをさせていただいたところ動作しなくなってしました。。

最初のなら大丈夫みたいです。
ご報告まで。

2007年6月28日 18:02

9 - Lios K さん

失礼しました。僕も間違っていたようです。

matchの引数に文字列を渡した場合は、正規表現として解釈されますが、replaceの第一引数に文字列を渡した場合は正規表現とは解釈されないようです。
また、'や"の代わりに/でくくれば、matchでもreplaceでも正規表現として解釈されます。

したがって、matchにもreplaceにも/_off\./を渡してやるか、あるいは、
matchには'_off\\.'
replaceには'_off.'
を渡してやるといいと思います。前者のほうが自然ですが。

URL｜2007年6月28日 23:59

10 - sakai さん

はじめまして。いつも参考にさせていただきながら勉強中です。
こちらのjsも使わせていただきました。
ひとつ、リクエストというか、こんな機能もついてたらいいな。というのがありまして・・・
ナビゲーションをロールオーバーさせている時に、表示されているページの画像は"_on"の画像をロールオーバーしないで表示というパターンが結構あります。画像にある特定のclass名とか指定したら、その画像は"_on"の画像と差替えてロールオーバーはしないなんて機能もあると、とても便利だと思います。
いかがでしょうか。

URL｜2007年8月 1日 18:53

11 - hama さん

http://kikky.net/pc/mouse_over.html

ぴんどめ san
> alt 属性が読み上げられない可能性
読み上げられます

て san
>回線が細い人たちが見た場合うまく機能しないような気がします。
キャッシュされます

JavaScriptは使えないブラウザもあるのでCSSのほうがいいような気がします。
CSSを使う場合はIE５対策が面倒です。

URL｜2007年8月 9日 13:48

12 - て さん

>>回線が細い人たちが見た場合うまく機能しないような気がします。
>キャッシュされます
onloadとかで、画像をキャッシュしようってことなら
表示に時間がかかっていらいらする罠

2007年8月12日 04:37

コメント投稿フォーム

post your comment

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。

site search
categories

RSS Feed by FeedBurner

staff blog
ad
求人情報 | 転職 | アルバイト | 派遣
recent entries
  1. デザインしてみた
  2. CSSで組むことのメリットとか
  3. 昨日は「CSS Naked Day」だったので脱いでました。
  4. Vista（64bitも）で動く、IETesterを入れてみた
  5. アックゼロヨン・アワード2007でデジパオフィシャルが入賞！
  6. 画像とかの横にあるテキストを上下中央に
  7. MT4.0、4.1専用 emoddy（絵文字プラグイン）
  8. コーダーとかマークアップエンジニアって呼ばれる人募集中です。後、ウェブコンサルタントも。
  9. Re:ユーザーの動き。
  10. タイピングの結果

More...

archives
  1. 2008年5月 [1]
  2. 2008年4月 [2]
  3. 2008年3月 [4]
  4. 2008年2月 [4]
  5. 2008年1月 [11]
  6. 2007年12月 [5]
  7. 2007年11月 [6]
  8. 2007年10月 [7]
  9. 2007年9月 [1]
  10. 2007年8月 [4]
  11. 2007年7月 [3]
  12. 2007年6月 [8]
  13. 2007年5月 [12]
  14. 2007年4月 [11]
  15. 2007年3月 [9]
  16. 2007年2月 [8]
  17. 2007年1月 [19]
  18. 2006年12月 [10]
  19. 2006年11月 [8]
  20. 2006年10月 [15]
  21. 2006年9月 [11]
  22. 2006年7月 [7]
デジパ運営サイト
えかきっず！

MTコンテスト応援中！

Movable Type 2007コンテストを応援しています！

行き場を失ったモノたち

フィードメーター - CSS HappyLife

Feeds購読数

あわせて読みたい

気まぐれブログパーツ

change color or layout
  • デフォルトカラー（春）
  • 薄い青
  • 青緑
  • 緑
  • 深い青
  • 薄い紫
  • ピンク
  • 黄金
  • 茶
  • 赤
  • 黒
  • 白
  • シルバー
  • 2カラム（カラーはデフォルト）
  • リキッドレイアウト（カラーはデフォルト）

ページトップへ