web dimension maker

jQueryを使って下記のことをやってみようと思います。

• 1. target属性を使わずに、外部リンクを別ウインドウで開く。(XHTML 1.0 Strict 対策)
• 2. 外部リンクの語尾にそれとわかるアイコンを配置する。

まずは、jQueryからjQuery 1.1.3.1 (compressed) 20kb(2007/07/25現在)をダウンロードしてください。そして、外部JSとしてHTMLに読み込ませてください。

次にサンプル&参考サイト&ソースを下記に示します。(Emotional Web さん、ありがとうございます。)

jQueryでtarget属性を使わずに外部リンクを別窓表示

$(document).ready( function () {
    $(".blank").append('&nbsp;<img src="/images/popup.gif" height="12" width="14" alt="" />');
    $(".blank img").css("vertical-align","text-top");
    $(".blank").after('&nbsp;');
    $('.blank').click(function(){
        window.open(this.href, '_blank');
        return false;
    });
});

上記のソースをjQueryと合わせて（外部）JSとして読み込み、a要素にclass="blank"を指定します。すると、さらに上記のようにリンクの語尾に画像が配置され、別ウインドウでリンクが開きます。

以下に簡単な説明を書きます。

• 1行目: 読み込まれたタイミングで作動させる。
• 2行目: class="blank"を指定された要素の中の語尾に画像を設置する
• 3行目: class="blank"を指定された要素内のimg要素にCSSを設定する。
• 4行目: class="blank"を指定された要素の（外の）語尾に半角スペースを挿入する。
• 5?6行目: クリックで、 window.openを実行します。

このように直感的にわかりやすい方法で記述できるのが、jQueryの良いところだと思います。

また、jQueryで検索すれば、リファレンス的なサイトもあります。そちらも参考にされると、いろんなことが簡単に出来ると思います。