web dimension maker

最近、背景画像を活用する、いわゆる｢画像置換｣を止めようという流れにあります。

そこで問題になってくるのが、ロールオーバーをCSSで行うか、Javascriptで行うかということです。（背景画像の位置をずらすやり方ができなくなるからです。）

今回はこの問題においていくつかある解決策の中で、僕が個人的に｢使える｣と思うものを実践したいと思います。

参考にさせていただくのは、STOPN 'LISTEN さんと月刊web creators 5月号です。前者はJavascriptを使う方法です。後者はCSSを使う方法です。

Javascriptを使用する方法

個人的には、この方法がもっとも簡単だと思います。

• step1. Image Rollover Code からrollover.jsをコピーし、HTMLに読み込ませる。
• step2. imgタグにclass="imgover"を追加する。
• step3. ロールオーバー用の画像を「オフ時の画像名+_o」で用意する。

以上で完了です。製作だけでなく、後々の更新時、特にリンクの追加が起きたときに簡単だと思います。

CSSを使用する方法

Javascriptに抵抗がある場合や、他のJSファイルが多すぎて(Ajaxなど)、極力JSファイルを減らしたい場合はCSSで行うのもいいかと思います。

この仕組みは、hover時に、埋め込まれているimgをvisibilityで消して、背景に指定したロールオーバー用画像を表示させるというやり方です。下記にCSSソースを書きます。

a{
        display: block;
        height: 高さpx;
        width: 幅px;
        background-image: url(rollover_sample_o.gif);
        background-repeat: no-repeat;
        background-position: left top;
}
a:hover{
        background-color: 背景色;
        /*IE6対策*/
}
a:hover img{
        visibility: hidden;
}

最後に、こちらのサンプルページでご確認ください

どういった方法でロールオーバーを適用するかは、その時々の状況にあわせて検討するのがいいかと思います。「画像置換」を使える場合には、それに越したことないとも思いますし。