jQueryで画像に張ったリンクの飛び先を変更する

diary


例えば、このようなhtmlがあります。



<p>

<a href="http://www.google.co.jp/">

		<img src="banner_a.jpg" />

	</a>

</p>

上記htmlでは、「banner_a.jpg」という画像をクリックすると、Google日本のサイト(http://www.google.co.jp)に飛びます。

こういう記述がサイト内に複数個所あり、すでにハードコーディング済みです。

しかし、後になって、リンク先はGoogle日本ではなくGoogle US(http://www.google.com/)と言われました。

こうした場合、一個一個リンクを修正していくのは大変な作業です。

今回は強引にJavaScriptでリンク先をGoogle US(http://www.google.com/)にしてしまおう、というプログラムです。

ソースは以下のようになります。



$(function(){

var images = $("img");

//ドキュメント内の画像をサーチ

for(var i=0; i<images.size(); i++){

//imgのsrc属性に「banner_a.jpg」と一致する箇所を探す

if(images.eq(i).attr("src").match("banner_a.jpg")){

//画像をクリックしたら、Google USのサイトを開く

$("img").eq(i).click(function(){

window.open('http://www.google.com/','_blank');

//元来の操作(Google 日本へ飛ぶ)を無効化する

return false;

});

}

}

});


■動作サンプル(jsdo.it)

jQueryで画像に張ったリンクの飛び先を強引に変更する - jsdo.it - Share JavaScript, HTML5 and CSS

■コメント

jQueryのmatchを使うとDOMを自由自在に操ることが​できます。

class名やid名で紐付けされていない特定のオブジ​ェクトの要素に変更を加えたい場合、対象オブジェクトに固有の文​字列があればmatchで走査しそ​の文字列を含むオブジェクトを発見してくれ、そのオブジェクトに​対し自由自在に一括操作できます。

でも、このブログの例にあるよう​な一括リンク変更はSEO的にもメンテナンス面でもなるべく避けるべきか​と思います（私も結局、全部HTMLを書き直しました）。あるいは、できることならばサーバーサイド技術でやるのがベターです。