【これは約 4 分の記事です】

ここ一週間（8月10日頃から8月19日今日まで）、このサイトをかなりいじっているのですが、いじっている部分はデータベース部分なので見た目の違いは全くわからないと思います。

数少ない見た目関係でいじっているところは、動画のバナー部分です。

 

このバナーは、ポインタを重ねると、バナーが暗くなるようにしています。

 

反転する前の画像と、反転後の画像ですが、一つのファイルに収まっています。つまりこんな感じ。

ポインタが重なっていない時には上の部分、重なっている時は下の部分が表示される作りになっています。

二つの画像ファイルを切り替えるのではなく、一つの画像ファイルの中に複数の画像を入れ、状況に応じて部分分を見せることで画像が切り替わっているように見せるウェブ画像処理上のテクニックです。ここで使っている手法は

CSSスプライト

という方法です。

この手法のなにがいいかというと、

• 二つの画像の切り替わりだと、2つ目の画像がダウンロードされていない状態で切り替わると一瞬画像が途切れるのだが、ひとつの画像の表示部分の切り替えなので、画像表示が途切れることがない

ことです。

このバナーを作った最初の時点では、影のある画像と影のない画像とは別ファイルにしていました。CSSスプライトの手法、知ってはいたのですが、

• 昨今のネットワーク環境で画像が途切れることはないだろう

と高をくくって二つのファルに分けていました。・・・考えが甘かったです。ポインタを重ねると、最初の一回目では一瞬バナー画像が乱れていました。二回目以降は問題が起きないのですが、一回目で結構気になるレベルだったので、修正しました。

CSSスプライトでの指定方法はこんな感じ

元の画像は　幅234px　*　高さ120px  で、半分の高さが60px。

マウスを重ねない時のCSSが

a {
display: block;
box-sizing: border-box;
width: 234px;
height: 60px;
background-image: url(“./images/twicastbutton/twitcast-csssprite.png”);
background-repeat: no-repeat;
background-position: left top;
}

重ねた時。

a:hover{
background-position: left bottom;
}

ということで、マウスポインタを

• 重ねていない時は「background-position: left top;」とtop（上）のほうを表示
• 重ねた時は「background-position: left bottom;」とbottom（下）の方を表示

と設定しています。

CSSスプライトはどこからどの範囲を見せるかという表示範囲の座標を計算するのが面倒だと思って、後回しにしていました。ですが、対象となる部分が2つだけであれば、上を表示するか下を表示するかだけを指示すればいいので、高さだけ正確にちょうど半分で画像が変われば後は計算はしなくてすみます。

面倒臭がらずに、最初からCSSスプライトでバナー表示すればよかったと今では反省しています。