このエントリーをはてなブックマークに追加

Memo

よく使うロールオーバーのメモ

2011/01/23
Memo

よく使うロールオーバーのメモ

ナビゲーションやボタンとなる画像は、ロールオーバーで変化を持たせておくとサイトを見ている人にとても親切です。
Dreamweaverなんかを使えば簡単に設置出来ますが、Dreamweaverの吐き出すJavaScriptのコードはあまり綺麗ではないので嫌い!とかCSSで実現したい!とかDreamweaver持ってない…といった感じの人向けに、仕事や制作でよく使ってるロールオーバーをメモしておきます。

しんぷるロールオーバー

Le-Arche(http://le-arche.jugem.jp/?eid=57)の頃に公開したものですが、コピペしやすいようにコチラにも置いておきます。
元はCSS Happy Lifeさんのこの記事で公開されてるものに、「ロールオーバーを適用出来る範囲をIDで指定する」「_on の画像をプリロードする機能」を追加したものです。
最近はほぼこのJSしか使ってないです。

画像の用意

まず画像を用意します。
通常時の画像を「button01_off」、ロールオーバー時の画像を「button01_on」といった感じで、「_(アンダーバー)」の前部分は同じ名前を使うこと。
拡張子も同じにしてください。

JavaScriptファイルの用意

下記のコードをコピペしてファイル名を付け、外部ファイルとしてヘッダから読み込ませます。

function smartOver() {
	smartRollover('rollover');	//ロールオーバーを適用させたい箇所のIDを指定
}
function smartRollover(idName) {
	if (!document.getElementById(idName)) { return false; }
	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;
}

これを「smartover.js」として保存し

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

といった感じで読み込ませます。記述はhead要素内にしてください。

htmlの指定

以上で準備はおしまいです。
htmlには以下のように記述してください。

<p id="rollover">
<a href="/"><img src="button01_off.gif" alt="ボタン" /></a>
</p>

こんな感じであっさりさっくりできるので、最近はこの方法がほとんどです。
以下にその他の方法も書いてみます。

CSSでロールオーバー

JavaScriptじゃなくてもCSSでロールオーバーすることは可能です。
最近は上記のしんぷるロールオーバーがほとんどなんですが、まれにCSSじゃないといけない時とかもあると思います。
例えば、このサイトのindexに出ている「Read More」はWPの仕様上画像を設置したり出来ないので、リンクに付与されている「more-link」というクラスに対してCSSで画像ボタンにするように指定しています。

CSSの指定

外部ファイルでもhead内でもよいので、以下のように指定。

a.rollover1{
   background: url(img/button01_off.gif) no-repeat left top;
   width: 207px;
   height: 57px;
   text-indent: -9999em;
   display: block;
}
a.rollover1:hover{
   background: url(img/button01_on.gif) no-repeat left top;
}

text-indentでaタグ内の文字を見えないようにして、背景にボタン画像を指定。
hoverで背景画像を_onのものに差し替える。

htmlの指定

あとは、htmlでaタグにクラスを指定するだけ

<p>
<a href="/" class="rollover1">テキストリンク</a>
</p>
プリロードされてないのが気になる

上記の方法で問題はないんですが、場合によってはon画像が読み込まれてなくて最初は表示されない、ということもあるかと思います。
プリロードされてない状態ですね。
そういうのが気になる人は以下の方法のが良いかもしれません。

  1. off画像とon画像がくっついた画像を用意する。
    サンプル↓
  2. CSSは以下のように指定する
    a.rollover2{
       background: url(img/button02.gif) no-repeat left top;
       width: 207px;
       height: 57px;
       text-indent: -9999em;
       display: block;
    }
    a.rollover2:hover{
       background: url(img/button02.gif) no-repeat left bottom;
    }
    
  3. htmlは以下のように指定
    <p>
    <a href="/" class="rollover2">テキストリンク</a>
    </p>
    

最初のと違う点は、背景画像の指定位置。
off画像は「left top」、on画像は「left bottom」
プリロードが気になる人はこちらで。

jQueryで簡単ロールオーバー効果

新しい画像を用意するのも、CSSを細かく指定するのも面倒くさい!
って場合は、jQueryと数行のJSでさくっと終わらせます。

JavaScriptファイルの用意

下記のコードをコピペしてファイル名を付け、外部ファイルとしてヘッダから読み込ませます。

$(function(){
    $("img.fadeimg").hover(
        function(){$(this).fadeTo(100, 0.6);},
        function(){$(this).fadeTo(100, 1);}
    );
})

これを「fadeimg.js」として保存し

<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/javascript" src="fadeimg.js"></script>

といった感じで、jQueryファイルの後に読み込ませます。
記述はhead要素内にしてください。
jQueryはこちらのサイトからダウンロードできます。

htmlの指定

以上で準備はおしまいです。
htmlには以下のように、imgタグに「fadeimg」というクラスを指定してください。

<p>
<a href="/"><img src="button03.gif" alt="ボタン" class="fadeimg" /></a>
</p>

この方法だと画像をもう一つ作る必要もないので、急遽画像にロールオーバー効果を追加しなきゃいけない!て時なんかは使えます。
クラスで指定出来るのでシンプルですし。

また、fadeimgは画像そのものを半透明にする仕様なので、aタグやimgを囲んでるタグに背景色を指定しておくのも面白かったりします。

上記の動作サンプルはサンプルページにて確認出来ます。

他にもいっぱいロールオーバーの方法ってあるとは思いますが、自分のよく使ってる方法はこんな感じ、というメモでした。

おまけ話

ちょうどこのエントリの準備をしていた時、Ustラジオ番組(でいいのかな?)「Vanitalk(ばにとーく)」でロールオーバーの話題が挙がって、なんだかタイムリーだなwとか思いながら聞いてました。

そのロールオーバーに関連した話の中で、iPhoneやiPadだとロールオーバーって意味ないよね、と。タッチパネルだと確かにロールオーバーって意味ないかも?!と気付きました。
自分はまだiPhoneもiPadも持ってないので、そろそろいい加減買わなきゃなぁと思ったりしております。
ロールオーバーがないとなると、クリックした時になんかアクションがあるのか、な?
まぁ、今以上にボタンらしく見せるデザインが大事になってくるのかなぁ。
タッチパネルに合わせたデザインも、考えてゆかねば、ですね。

@・ェ・@

Category : MemoTags : , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく