CSS: ImageSwap

メニューなどに画像を設定し、マウスポインタを合わせる事で画像を変化させる効果は、多くのサイトで使われている言わば定番効果となっています。

そのような効果の実装では、現在でもMM_swapImageなどのJavaScriptを利用しているようなサイトが多く見られます。 メニューにマウスポインタを合わせる、あるいはクリックする事でサブメニューを表示するなど、他のエレメントと連携するような処理の場合には、やはりJavaScriptなどの利用が必要となりますが、 単に画像を変更するだけならば、HTML+CSSだけで行う事が可能です。

JavaScriptを利用した実装では、初期画像と切替後の画像を別ファイルとして用意し、初期画像をimgタグで指定します。 そしてマウスポインタが画像の範囲に入った時に、JavaScriptでimgタグのファイルソースを変更する事で画像切替を行うというのが、一般的な処理になります。 また、瞬時に切り替える為に切替後の画像は前もって先読みするような処理も行われています。

一方CSSでは、任意のエレメントの背景として画像を指定し、:hoverなどの動的な効果を与える事が出来る擬似クラスを利用して切替後の画像を表示します。

ここでは、CSSを利用して3パターンの実装を行います。


これはCSSを使った画像切替処理での基本パターンとも言える実装になります。

CSSでは背景画像として画像を使う場合に、画像の中で実際に表示される部分の指定が出来ますので、1つの画像ファイルに複数のイメージを混在させる事が可能になっています。 そこで、関連性のある一連の画像を1つの画像ファイルに纏める手法が広く使われています。

上の画像にマウスポインタを乗せる事で画像が変化します。 テキストでのリンクも設定してありますが、CSSで非表示(visibility: hidden)にする事でCSSが有効な環境では表示しません。これはCSS非対応環境用のリンクとして利用する為です。

2イメージ元画像ファイル 画像ファイル自体は、このように2イメージを含んだものとなっています。

上記の例では画像に文字情報まで含んでいますが、画像を本来の背景としてのみ利用し、文字情報はテキストとして設定する事で、1つの画像ファイルを汎用的に利用する事も出来ます。

 

メニューに利用した場合のサンプルです。:hoverなどの擬似クラスでも通常のCSS定義と同様の設定をする事が出来ます。 画像ファイル使用時と比較した場合、フォントや文字サイズなどクライアント環境/設定に依存する要素が大きい為、想定通りの表示とならない場合があります。

3イメージ元画像ファイル 3つのイメージを1画像ファイルにまとめて格納してあります。

利点
  • キャッシュ処理不要
    初期画像以外の画像ファイルを先読みするような処理を行う事無く、タイムラグ無しでの画像切り替えが可能です。
  • 画像ファイル数削減
    数パターンの画像をグループ化し1ファイルに纏める事が出来ますので、ファイル管理コストの削減が見込めます。
欠点
  • CSS非対応環境での動作
    CSS非対応環境を考慮する場合には、別途画像を用意するか、代替テキストを表示するなどの手法が必要となります。
  • 画像ファイルのサイズ
    このような画像切替効果では数十KB以上のファイルを使う事はあまり有りませんので、問題となるケースは少ないと思われますが、ファイル数は削減出来る一方、確実に個々の画像ファイルのサイズは大きくなります。

こちらでは、CSS非対応環境でも表示されるように初期画像はimgタグで指定します。

1イメージ画像ファイル

CSS対応環境ではimgタグで指定した画像自体はCSSで非表示にし、実際に表示される画像は背景として設定された画像になります。 画像の切替は他の実装と同様に擬似クラスを利用して行っています。 一方、CSS非対応環境では、imgタグで指定された画像を表示するだけで、画像切替は行いません。

1イメージ元画像ファイル0 1イメージ元画像ファイル1 それぞれの状態用に2つの画像ファイルを用意します。
利点
  • CSS非対応環境での表示
    CSS非対応環境では画像の切替は出来ませんが、初期画像はimgタグを使い設定していますので、多くの環境で想定通り表示される事が期待出来ます。
欠点
  • 複数の画像ファイルが必要
    JavaScriptを使う一般的な処理と同様に、それぞれの状態用に画像ファイルを用意する必要があります。
  • 画像ファイル指定の分散
    画像ファイル指定が、初期画像のimgタグと切替画像のCSSの2個所に分散される為、修正/変更コスト増の要因ともなります。

モバイル系のブラウザで、転送速度/パケット量などを考え画像を取得しないようにしている場合や、 PC系ブラウザでも画像を非表示にしているような環境において、 画像の代わりに代替テキストを表示させるように対応した実装です。

CSS対応環境であるという前提がある為、 代替テキストをCSSで非表示にするような手法は使えませんので、記述が多少冗長になるという欠点があります。

このような場合において定番とも言える実装は、Gilder/Levin Methodと呼ばれる手法です。 position:relativeで基準位置設定したエレメントに代替テキストを記述し、 それをposition:absoluteと背景画像を設定した子エレメントで上書きするような記述になります。

Gilder/Levin Methodを元にした実装 ImgSwap CSS対応で画像も表示する環境では、画像が表示されマウスポインタによる画像切替も行われますが、
CSS対応で画像を表示しない場合とCSS非対応環境では、代替テキストであるImgSwapが表示されます。

が、画像を表示する環境で透過画像を使った場合には、下の代替テキストが表示されてしまうケースがあります。 

<a id="aImgNI_01" href="">ImgSwap<span></span></a>

#aImgNI_01 {
	position: relative;
	display: block;
	width: 80px;
	height: 28px;
	overflow: hidden;
}

#aImgNI_01 span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url(img/imgswap_2p.png) no-repeat top left;
}

#aImgNI_01 span:hover, a:hover#aImgNI_01 span {
	background-position: bottom left;
}
利点
  • 多くの環境で情報を表示可能
    CSSの有効/無効や画像表示/非表示など多くの環境で、表示される形態は異なりますが、情報が表示される可能性が高くなります。
欠点
  • 追加設定が必要
    CSSの記述だけでなく、HTMLタグの追加も必要となります。
Copyright © 2006-2007 distraid Inc. All rights reserved.