PROFILE
Template
【HTML・CSS】 JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
<headまたは外部JSファイル内>
function smartOver() {
smartRollover('tes');
}
function smartRollover(idName) {
if(document.getElementsByTagName) {
var images = document.getElementById(idName).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", smartOver, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartOver);
}
else{
window.onload = smartOver;
}
<body>
<p id="tes"><img src="images/test_off.gif" /></p>
◇仕組み+使い方
テンプレートではあまり使う所が無い気がしますが(笑)
作品サイトとかで使うつもりなので、メモ。ロールオーバーのJSです。
コレも元々はCSS HappyLifeのhiraさんが公開していたものです。それに手を加えました。
「***_off」という画像があったら、マウスオーバーした時、「***_on」に差し換える、というもの。
元々のは、ページ内の「***_off」という画像全部に反応してしまっていたので、指定したIDの範囲内に「***_off」という画像があったら「***_on」に差し換える、という感じでIDで範囲指定してみました。
smartRollover('tes');
でロールオーバーを適用したいIDを指定します。
smartRollover('tes');
smartRollover('tes2');
smartRollover('tes3');
という感じで複数指定も出来ますよ。
んで、元々のは、この関数の実行をaddEventListenerとかだけで実行させていました。
元々のがそれで実行してたんで、ならってそうしてました。
しかし、残念ながらMacIEでは無効でした(涙)ので、window.onloadで、古ーいブラウザでも動くよう、昔ながらの実行方法を追加してみました。
addEventListenerは、最近のブラウザのなんか特殊な仕組みを利用してるみたいです?
FlashのActionScriptでも実行出来るイベントらしいです。
window.onloadだけの方がシンプルだし、分かりやすい気がするのですが、addEventListenerは何かいいところがあるのでしょうか?
調べてみてもディープな世界ばかりで、どうにも理解出来ませんでした。
あ、「MacIEなんて知らねぇよ、けっ」って人は、window.onloadの部分を消してもらってもOKですよ。
MacIE以外ではしっかり動きますんで。
◇メリット
・ソースがシンプル
・HTMLに余計な記述を増やさず、ロールオーバーができる。
◇デメリット
・「***_on」の画像が無い場合、画像が表示されなくなります
・画像のプリロードをしていないので、最初はonの画像が表示されにくい。
追記:13時くらい
サンプル張るの忘れてました(汗)→Sample
追記:2007.6.29
画像のプリロードを動的にやってくれるバージョン完成♪
内容は↓にて。
↑のサンプルも更新しました。
function smartOver() {
smartRollover('tes'); //ロールオーバーを適用させたい箇所のIDを指定
smartRollover('tes2');
}
function smartRollover(idName) {
if(document.getElementsByTagName) {
var images = document.getElementById(idName).getElementsByTagName("img");
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match(/_off¥./))
{
fileName = new Array(images[i].getAttribute("src").replace("_off.", "_on."));
preImages = new Array();
for (j=0; j<fileName.length; j++)
{
preImages[j] = new Image();
preImages[j].src = fileName[j]; //「_on」の画像をプリロード
}
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); //マウスオーバーで_off→_on
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); //マウスが離れたら_on→_off
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartOver, false); //実行
}
else if(window.attachEvent) {
window.attachEvent("onload", smartOver);
}
else{
window.onload = smartOver;
}
上の方で紹介しているのと違う所は、緑文字の部分。
「***_on」の画像を探して参照し、プリロードしてます。
この「***_on」の画像を探すのが上手くいかなくて、苦労しました。
this.getAttribute("src").replace("_off.", "_on.")が参照しているのだ、とやっと気付き、なんとかなりました。
getAttributeとか使った事なかったので、調べまくりましたよ;;
これで随分コードがスッキリしそうです♪
<< JavaScriptメモ(2):折り畳みナビ|MAIN|やたー >>
Comment
JavaScriptなら一般的にはDreamweaverが書いたものが普及してますよね。
CSSで書いたほうがHTMLがきれいになりますよ。
from: hama | 2007/08/10 7:48 PM
http://kikky.net/pc/mouse_over.html
ついでにこれCSS版のロールオーバーです。
from: hama | 2007/08/10 7:49 PM
>hamaさん
初めまして。
Dreamweaverが動的に生成するJavaScriptの方が普及しているのは知っていますが、後々の修正がいささか大変だったりもします。
この記事で紹介しているものは意外と効率が上がるので、紹介しました。
CSSでロールオーバーする方法ももちろん知っています。
確かにHTMLは綺麗になりますが、その分CSSが長文になってしまいますよね?
その辺がネックなので、CSSでロールオーバーはしないようにしています。
from: 冥 | 2007/08/11 11:11 AM
やっぱりイロンナ手法を知って、そのなかから状況に応じてベストなものを選択するのが一番ということですね。
from: hama | 2007/08/12 4:59 PM
>hamaさん
そうですね。
特に仕事となってきますと、色んな状況に遭遇しますからね;
お客様も様々ですから。苦笑
from: 冥 | 2007/08/27 10:00 AM
Trackback
トラックバックURL :
JavaScript でロールオーバー ロールオーバー|CSS HappyLife と言う記事を発見したので試してみました。 サンプルページ リンク先の記事で、ロールオーバー前の画像名は *_on.gif に、ロー... Bowz::Notebook | 2008/03/12 12:31 AM
JavaScriptによるシンプルなロールオーバー。 ものすごくシンプルで使いやすいロールオーバーをご紹介。 最近、特別な理由がない限りこの方法でロールオーバーの設定をしています。 使うのは「CSS HappyLife」さんの「ソース... btmup Blog [tech] | 2008/11/04 10:01 PM
CSSを使わないロールオーバー最近はロールオーバーをCSSでやるのが主流のようですが、個人的には以下の理由から... WEB制作会社のメモ帳in徳島(ホームページ作成Tips) | 2008/11/18 9:58 PM
マウスオーバーが簡単にできるJavaScript(smartRollover.js編)DWのロールオーバーだと、ソースが美しくない ・・・というか、分かりにくくなるので、なんとか回避したいと思ってました。 かといって、い... Memoのメモ | 2009/08/23 1:11 PM
JavaScript による 3 state button [JavaScript] 今日は時間があるので久々にJavaScriptのお勉強。 JavaScript本の方はまだ半分ぐらいしか読んでいないけれど、読んでばっかりだと理解が浅いし面白くないのでコードを書いてみた。 マウスオーバーした場合とそうじゃない場合で画像を変えるスクリプトが掲 buggy_trekkerの学習帳 | 2009/10/24 10:12 PM
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)