Search
  1. jQIR〔jQueryでテキストを画像に置換〕

jQIR
jQueryでテキストを画像に置換

2009/11/23

jQIR

jquery.js/jquery-jqir.js

見出しやテキストを画像に置換するjQueryプラグイン。

画像の拡張子を除くファイル名部分を要素のID名に指定すると、ページを読込時に、ID名に指定した画像をその要素内にimg要素として挿入し、テキスト部分は画像の代替テキストになります。 要素内にリンクを含む場合も問題なく置換されます。 オプションで画像フォルダへのパスも指定できます。

▼ソース
<h1 id='heading1' class='jqir'>見出し1</h1>
<h2 class='jqir {src:heading2.png}'>見出し2</h2>
<h3 id='heading3' class='jqir'><a href='http://jquery.com'>見出し3</a></h3>
▼置換後のソース
<h1 id='heading1' class='jqir'>
	<img src='/content/img/ajax/heading1.png' alt='見出し1'>
</h1>
<h2 id='heading2' class='jqir {src:heading2.png}'>
	<img src='/content/img/ajax/heading2.png' alt='見出し2'>
</h2>
<h3 id='heading3' class='jqir {src:heading2.png}'>
	<a href='http://jquery.com'><img src='/content/img/ajax/heading3.png' alt='見出し3'></a>
</h3>
設置イメージ設置イメージ
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>jQIR | 設置サンプル</title>
        <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery-jqir.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".jqir").jQIR("png", "/content/img/ajax/");
            });
        </script>
        <style type="text/css">
            h1, h2 ,h3 { margin:20px 0; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1><a href='http://www.texotela.co.uk/code/jquery/jQIR/'>jQIR</a> | 設置サンプル</h1>
<!-- CODE -->
<h1 id="heading1" class="jqir">見出し1</h1>
<h2 class="jqir {src:heading2.png}">見出し2</h2>
<h3 id="heading3" class="jqir"><a href="http://jquery.com">見出し3</a></h2>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women