MT100本をAmazonで購入！

ソースがシンプルな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へ投稿
  • Redditへ追加

Track Back [13]

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日（水）

痒いところに手が届くJavaScriptライブラリたち

例えば、画像のロールオーバーをもっと楽にできないかな・・・。テーブルの背景色を1行おきに変えたいけど、1行1行手動でclassを指定するのは面倒だな・...

by HiGash.Net｜2008年08月21日（木）

シンプルなコードでロールオーバーを実現する。

先日、担当デザイナーの不在中、とあるサイトの修正を急遽行う事になったため、どうしたことか私におはちが回ってきた。 今回は「急遽」のため、担当デザイナーの...

by 超暫定版！エム・アールデザイン ブログ｜2008年09月22日（月）

JavaScriptによるシンプルなロールオーバー。

ものすごくシンプルで使いやすいロールオーバーをご紹介。 最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。 使...

by btmup Blog [tech]｜2008年11月04日（火）

ロールオーバーをＣＳＳからＪＡＶＡに変更してスッキリ

うちのブログのメニュー部分に使用しているロールオーバー（マウスオーバー） この部分なん...

by susi-paku -弐壱伍伍娯楽研究所-｜2009年06月01日（月）

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

DWのロールオーバーだと、ソースが美しくない ・・・というか、分かりにくくなるので、なんとか回避したいと思ってました。 かといって、い...

by Memoのメモ｜2009年08月23日（日）

smartRollover.jsで楽々ロールオーバー

画像をロールオーバーさせる方法は色々ありますが、一押しはCSS HappyLif...

by dicecream:blog｜2009年10月05日（月）

JavaScript による 3 state button

[JavaScript] 今日は時間があるので久々にJavaScriptのお勉強。 JavaScript本の方はまだ半分ぐらいしか読んでいないけれど、読...

by buggy_trekkerの学習帳｜2009年10月24日（土）

comment [16]

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

13 - Uki さん

_onという画像ではなく、ある特定の画像にロールオーバーさせたいのですが、どなたかやり方わかりませんか。

2009年6月21日 15:19

14 - dari さん

なんて簡単にロールオーバーできるスクリプトですか！
ＧＪです。

2009年9月17日 23:05

15 - ando さん

なかなかシンプルなスクリプトですね。使わせてください。

URL｜2009年10月15日 00:07

16 - PemHeexpess さん

Отличный сайт и материалы очень познавательные

URL｜2009年11月13日 01:04

コメント投稿フォーム

post your comment

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

categories

RSS Feed by FeedBurner

site search
link
PR

ドメイン取得なら
VALUE-DOMAIN

recent entries
  1. IEだとMT5のフッターが動くのを何とかするメモ
  2. 今回頼んだ名刺の出来がすごく良かった
  3. アルファブロガー・アワード2009にウチがノミネートされましたっ
  4. ZERO
  5. HTMLコーダー100の質問に答えてみた
  6. 各プロパティの値を初期値にする、initial_value.css
  7. とっても使えるoverflowプロパティ。その使い方色々。
  8. ページ送りのサンプル4種+2
  9. ちょっとした組み方の違い
  10. HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。

More...

archives
  1. 2010年
    1. 2010年2月 [2]
    2. 2010年1月 [3]
  2. 2009年
    1. 2009年11月 [2]
    2. 2009年10月 [1]
    3. 2009年8月 [1]
    4. 2009年7月 [4]
    5. 2009年6月 [1]
    6. 2009年5月 [2]
    7. 2009年4月 [1]
    8. 2009年3月 [2]
    9. 2009年2月 [1]
    10. 2009年1月 [1]
  3. 2008年
    1. 2008年12月 [2]
    2. 2008年11月 [5]
    3. 2008年10月 [1]
    4. 2008年9月 [1]
    5. 2008年8月 [3]
    6. 2008年7月 [2]
    7. 2008年6月 [5]
    8. 2008年5月 [5]
    9. 2008年4月 [2]
    10. 2008年3月 [4]
    11. 2008年2月 [4]
    12. 2008年1月 [11]
  4. 2007年
    1. 2007年12月 [5]
    2. 2007年11月 [6]
    3. 2007年10月 [7]
    4. 2007年9月 [1]
    5. 2007年8月 [4]
    6. 2007年7月 [3]
    7. 2007年6月 [8]
    8. 2007年5月 [12]
    9. 2007年4月 [11]
    10. 2007年3月 [9]
    11. 2007年2月 [8]
    12. 2007年1月 [19]
  5. 2006年
    1. 2006年12月 [10]
    2. 2006年11月 [8]
    3. 2006年10月 [15]
    4. 2006年9月 [11]
    5. 2006年7月 [7]
デジパ運営サイト
ブログパーツ

フィードメーター - CSS HappyLife

Feeds購読数

あわせて読みたい

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

ページトップへ