テキストのリンクをON/OFFする

質問

Javascriptでテキストをクリックすると2箇所の画像を同時に変更することができたのですが、表示されている画像のテキストのリンクをはずす方法がわかりません。はじめは「ページ３＋４」のテキストのみがクリッカブルで、「ページ３＋４」のテキストをクリックすると、「ページ１+２」のテキストのみがクリッカブルになるようにしたいのです。表示されていない画像のテキストのみをクリッカブルにする方法をどなたか教えていただけますでしょうか？

<script language="JavaScript">
<!--
function swapImg(imgfile1,imgfile2)
{
document.swpimg1.src = imgfile1;
document.swpimg2.src = imgfile2;
}
// -->
</script>

<div><img src="sample1.gif" name="swpimg1" /><img src="sample2.gif" name="swpimg2" /></div>
<div><a href="javascript:swapImg('sample1.gif','sample2.gif')">ページ１+２</a>　<a href="javascript:swapImg('sample3.gif','sample4.gif')">ページ３＋４</a></div>

回答No.2

HIRSYU · ベストアンサー

「document.swpimg1.src」のような手法は、あまり推奨されていません。
nameではなく、idを付与し、idで参照する手法の方が推奨されています。

-- JavaScript --
document.getElementById("swpimg1").src = imgfile1;
document.getElementById("swpimg2").src = imgfile2;
-- HTML --
<div><img src="sample1.gif" id="swpimg1" /><img src="sample2.gif" id="swpimg2" /></div>

で、質問に対する回答ですが、ANo1さんが言うとおりです。

ただ、無理やり、それらしい動きをするのを作ってみました。
-- JavaScript --
function swapImg(elem, imgfile1,imgfile2)
{
//画像を変更。
document.getElementById("swpimg1").src = imgfile1;
document.getElementById("swpimg2").src = imgfile2;

//id="list"内にある、aタグ一覧を取得する。
var aList = document.getElementById("list").getElementsByTagName("a");
//aタグ一覧をループ。
for(var i = 0; i < aList.length; i++){
if(aList[i].id == elem.id){
//aタグと、実行元が同じの場合、通常テキストを表示。
document.getElementById(aList[i].id).style.display = "none";
document.getElementById(aList[i].id + "_1").style.display = "inline";
}else{
//aタグと、実行元が異なる場合、リンクテキストを表示。
document.getElementById(aList[i].id).style.display = "inline";
document.getElementById(aList[i].id + "_1").style.display = "none";
}
}
}
-- HTML --
<div><img src="sample1.gif" id="swpimg1" /><img src="sample2.gif" id="swpimg2" /></div>
<div id="list"><a id="a1" href="javascript:void(0)" onclick="swapImg(this, 'sample1.gif','sample2.gif');">ページ１+２</a><span id="a1_1" style="display:none;">ページ１+２</span>　<a id="a2" href="javascript:void(0)" onclick="swapImg(this, 'sample3.gif','sample4.gif');">ページ３＋４</a><span id="a2_1" style="display:none;">ページ３＋４</span></div>

仕組み（動作）は、
１．リンクテキストと、通常テキストをHTMLに埋め込む。
２．通常テキストは、スタイルシートで非表示にしておく。
３．リンクをクリックした際には、リンクテキストを非表示に、通常テキストを表示状態に変更。

あと、swapImgの引数に、自分自身を受け取るように追加。
href要素でJavaScriptの関数を呼び出すと、自分自身を引数に渡せないようでしたので、hrefでは何もせず、onclickで実行するように変更。

お礼

とりあえず教えていただきました
-- JavaScript --
document.getElementById("swpimg1").src = imgfile1;
document.getElementById("swpimg2").src = imgfile2;
-- HTML --
<div><img src="sample1.gif" id="swpimg1" /><img src="sample2.gif" id="swpimg2" /></div>
の方法を利用しようと思います。
これならリンクはついたままですが、画像が表示されないことはないので。

せっかくいい方法を教えていただいたのに、あきらめるようで残念ですが、かなり勉強になりました。ありがとうございました。

補足

ありがとうございます。早速やってみました。
ローカルではうまくいったのですが、アップロードすると、なぜかIE（バージョンは6を使用しています）で「ページ３＋４」をクリックすると画像が表示されません。
画像表示エリアを右クリックで「show picture」をクリックすると画像が表示されるので、コードの問題ではなくブラウザの設定の問題なのかなと思いますが、「show pictures」もチェックが入っていましたし、セキュリティをデフォルトにしたりしたのですが、表示されません。
デフォルトの設定で表示されたほうがいいので、なにかアドバイスがありましたら、よろしくお願いします。

回答No.1

auty

・　<a>タグ自身には、無効にする属性はないようなので、自分で色を変えて実行を無視するという方法を考えてみてください。

お礼

<u>タグをつけたり、テキストの切替を利用したりとやってみたのですが、あまり詳しくないので、うまくできませんでした。
<a>タグ自身を無効にする属性はないのですね。
ありがとうございました。