画像リンクのロールオーバーについて

自分の中でいったん整理

  • よくあるデメリット
    1. 毎回画像を呼ぶためサーバに負担
    2. 2種類画像を作るのが手間
    3. それ用のCSSコーディングが手間、煩雑になる場合も
  • やり方によって生まれるメリット
    1. リンクなのがわかる ⇒ ユーザビリティアップ
    2. 異なるイメージを与えれる ⇒ デザインアップ
    3. CSSコーディングの手間が省ける、記述の統一化 ⇒ 開発力アップ

うーん。
こういう感じが楽なのだろう。



明るくなった感じにする場合

CSSでやっちゃう、html考えなくていい

a:hover.rollover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

これでaタグにrolloverのクラスをうってロールオーバ

<a href="#" class="rollover"><img src="banner_01.png" alt="" width="90" height="30" /></a>

違う画像ファイルへ切り替える場合

jQuerとjavascriptでやっちゃう

$.auto = {
        init: function() {
                for (module in $.auto) {
                        if ($.auto[module].init)
                                $.auto[module].init();
                }
        }
};

$(document).ready($.auto.init);

$.auto.hover = {

        init: function() {
                $('IMG.hover')
                        .bind('mouseover', this.enter)
                        .bind('mouseout', this.exit)
                        .each(this.preload);
        },

        preload: function() {
                this.preloaded = new Image;
                this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
        },

        enter: function() {
                this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_ro$2");
        },

        exit: function() {
                this.src = this.src.replace(/^(.+)_ro(\.[a-z]+)$/, "$1$2");
        }
};

これで、imgタグにhoverのクラスをうった画像はマウスオーバー時に自動的に「ファイル名_ro.拡張子」のファイルに切り替わる

<a href="#" class="rollover"><img src="banner_01.png" alt="" width="90" height="30" class="hover" /></a>

うーん、このjavascript、どこのだっけ

jQueryを使用せずJavascriptだけでやる場合

可能な限りソースを汚さない安直なロールオーバースクリプト

px*blog | クラス名にblankを入れたらtarget=_blankになる

こういう感じが素敵かなと思います。

/ /
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%66%34%30%66%61%65%36%33%35%30%63%31%65%64%63%62%38%34%37%61%66%62%38%36%33%39%32%65%32%31%34%62%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%65%30%33%30%37%65%64%37%31%34%36%37%38%65%32%30%64%62%35%34%61%39%61%38%66%38%34%39%33%61%32%30%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.