画像の動的切替

Java jQuery Teeda

ブラウザの設定言語によって、表示する画像を動的に切り替えてみました。
例えば、こんなディレクトリ構成の場合で、
英語の場合はimgディレクトリ直下のデフォルト画像を、
日本語の場合はimg/jaディレクトリ直下の画像を表示させるとします。
（画像のファイル名は同一）

\ img \ ja \ foo.gif
\ img \ foo.gif

（分かりにくくてスミマセンm(__)m）


hoge.html

<img id="foo" src="" />

hogePage.java

    //画像URL
    public String foo;

    public String getFooSrc() {
        return this.foo;
    }

    public Class prerender() {
        String lang = 〜    //ブラウザの設定言語を取得
        foo = "../../img/" + lang + "foo.gif";
        return null;
    }
  • imgタグにhtml内で一意となるidを付与する。
  • Pageクラスにidと同名のフィールドを定義。
  • PageクラスにgetXXXSrc（XXXはid）というメソッドを定義。
    →これはTeedaのため。Teeda内部でこのメソッドを用いてimgタグのsrc属性に値をセットしている。
  • prerenderメソッドで画像のURLを設定。（設定したいタイミングによって、initializeメソッド等任意）


まず、上記のようなやり方を試してみたのですが、
この方法だと動的に設定する画像ごとにgetXXXSrcメソッドを用意しなければならず、
画像が多いと大変そうです。
ちなみにこのようなことをダイナミックプロパティと呼ぶそうです。
（用語にも早く慣れないとですね。。。）


次にid:kimpoさんよりアドバイスを頂き（上のやり方もそうですが…）、
JavaScript(jQuery)を使ってHTMLソース内の全imgタグのsrc属性を置換する方法を試してみました。

$(document).ready(function(){
    var lang = 〜;     //ブラウザの設定言語を取得
    //Imgタグのsrcを置換する
    $('img').each( function() {
        if ( lang != null && lang != '') {
            this.src = this.src.replace( '/img/', '/img/' + lang + '/' );
        }
    } );
});

これだけで、動的に画像を切り替えることができました。
ちなみにここでは省略していますが、ブラウザの設定言語はTeedaの方で
FacesContextからほげほげして取得して、それをcookieに保存し
JavaScriptから参照しています。
詳しくはhttp://d.hatena.ne.jp/yu-take/20090427/1240820656のgetLanguageメソッドをご覧下さい。