リンクにおける挙動の参照と範囲指定

質問

ほぼ初心者です。

html内に、javascriptを参照させて、以下のように作成しました。

<SCRIPT language="javascript"src="popup.js"></script>
<□□>
<a href="1.jpg" onclick="popup(href);return false;">テスト1</a>
<a href="2.jpg" onclick="popup(href);return false;">テスト2</a>
<a href="3.jpg" onclick="popup(href);return false;">テスト3</a>

</□□>

普通にポップアップされたのですが、以下の方法ができないかと思っております。

(1)「onclick="popup(href);return false;"」の部分をほかから参照させる
(2)特定の範囲のリンクのみ「onclick="popup(href);return false;"」を適用させる。

(1)はLightboxのように、「rel="thumbnail"」みたいに参照できないか、ということです。
(2)は上の「<□□>～</□□>」のように囲われた範囲のリンクで、「onclick="popup(href);return false;"」を適用できないか、ということです。

よろしくお願いします。

回答No.1

notnot

HTMLソースのAタグに書かないということだと、JavaScriptで動的に追加ですね。

rel="foo" のAタグのonclickを追加するのだと、

<script type="text/javascript">
var a=document.getElementsByTagName("a");
for(var i=0; i<a.length; i++){
if(a[i].getAttribute("rel")=="foo") a[i].setAttribute("onClick","popup(href);return false;");
}
</script>

実行のさせ方は色々あるけど、一番簡単なのはbodyの一番最後に上記を書くのがいいかと。

<div id="foo">。。。</div> で囲まれた内部のすべてのAタグが対象なら、

<script type="text/javascript">
var a=document.getElementById("foo").getElementsByTagName("a");
for(var i=0; i<a.length; i++){
a[i].setAttribute("onClick","popup(href);return false;");
}
</script>

お礼

もうひとつ補足です。

IEではsetAttributeを使うとバグがあるみたいです。
google chromeでは正常に動作しましたので、IEのバグが原因かと思います。
IEでも動作するような構文を教えていただければ幸いです。

補足

ありがとうございます。

両方試してみたのですが、同一ウィンドウに”1.jpg”が読み込まれるだけで、ポップアップされません。

エラーは吐いてないみたいなのですが・・・