Home > > 【jQuery】CSSを使わずに画像置換

【jQuery】CSSを使わずに画像置換

Posted by: Keisuke
2008年6月17日 02:00

久々にjQueryネタです。

画像置換をする際、僕はいつも　text-indent:-9999px;　などでテキストを領域外へ飛ばして対応していましたが、jQIRというjQueryプラグインを使えばCSSを使わずにテキストを画像置換できます。

使い方は以下、

<script type="text/javascript">
    $(function(){
        $(".hjpg").jQIR("jpg","images/");
        $(".hgif").jQIR("gif","images/");
        $(".hpng").jQIR("png","images/");
    });
</script>

jQIR以前は、画像置換する場所のclass名、jQIR以後は順に、置換する画像のファイル形式、画像が格納されているディレクトリのパスと続きます。

<h1 id="logo" class="hgif">ロゴ</h1>

"ロゴ"というテキストを、logo.gif　という名前の画像で置換したい場合は以上のように書く。

うん、非常に簡単。

いつか、機会があったら使ってみよう。

jQuery - jQIR

Comments:0

Trackbacks:0

TrackBack URL for this entry: http://2-laps.com/mt/mt-tb.cgi/103
Listed below are links to weblogs that reference: 【jQuery】CSSを使わずに画像置換 from It's a Smile World

Home > > 【jQuery】CSSを使わずに画像置換

Links

Calendar

Tag Cloud

読書メーター