リンク先を動的に変更する

解決済

質問者：toosanba
質問日時：2009/09/09 21:59
回答数：3件

簡単な仕様を考えて試行錯誤しながら勉強している
ジャバスクリプ超初心者です
どなたか宜しくお願いします

<a href="○○○○○○○○○"><img src="photo01.jpg" width="200" height="150" border="0" id="change" name="change" /></a>
のリンク部分のアドレスを動的に変更したいと思っています

画像とリンク要素両方を「document.write」で書き出し変数を与えてあげれば
出来る事はわかっているのですが

今回は自分の仕様で
どこまでJSでできるものなのか知りたい事もありまして
どうしても指定位置のリンク部分のアドレスだけを変更したいと思っています。

下記方法
document.link[インデックス].hrefで取得できるのですが
この方法だと何番目のリンクかといちいち数えて数字を指定しなきゃいけない為リンク数が多くなった場合には
ちょっと現実的ではありません

そこで例えば指定位置の画像情報を取得するみたいに
「document.ID名.src」みたいに指定箇所の「a」要素の「href」を指定する事はできますでしょうか？
ちなみに同じようにリンクに対してもやってみたのですがダメでした

下記が現在のソースになります。
宜しくお願いします。

=============================================================
JavaScript
=============================================================
function img_chage(no){

img = new Array();
img[0] = "photo01_ov.jpg";
img[1] = "photo02_ov.jpg";

url = new Array();
url[0] = "http://www.google.co.jp";
url[1] = "http://www.goo.ne.jp";

document.change.src = img[no];
document.links[0].href = url[no];

}

=============================================================
HTML
=============================================================
<a href="http://www.yahoo.co.jp"><img src="photo01.jpg" width="200" height="150" border="0" id="change" name="change" /></a>
<br />
<img src="photo01_ov.jpg" width="100" height="75" onMouseOver="img_chage(0)" />
<img src="photo02_ov.jpg" width="100" height="75" onMouseOver="img_chage(1)" />

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2009/09/10 09:23

リンク要素にidなどを振っておけば簡単ですが、ご提示のソースだとそのなかの画像にidがあるのでそれを利用してもいけます。

ごく簡単な例です。（リンクのみ変更。画像は変更してません。）
<html>
<head>
<script type="text/javascript">
function set(n) {
var url = ["http://www.google.co.jp","http://www.goo.ne.jp"];
var img = document.getElementById('change');
img.parentNode.href = url[n];
alert(url[n] + 'に変更しました');
}
</script>
</head>

<body>
<a href="http://www.yahoo.co.jp">
<img src="photo01.jpg" id="change">
</a>
<hr>
<input type="button" value="googleへ変更" onclick="set(0)">　
<input type="button" value="gooへ変更" onclick="set(1)">
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
なるほど～子要素から親要素のIDを取得するようなメソッドもあるんですね
参考になります。
勉強してどんどん幅を増やしていきたいと思います。

通報する

お礼日時：2009/09/11 01:21

No.2

回答者： Gotthold
回答日時：2009/09/10 01:26

A要素にidつけてgetElementByIdで取得すれば良いのでは？

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
その手がありましたねうーーんまだまだ勉強中で適材適所で
使うメソッドやらプロパティーが即座に思いつかずすいません＞＜
参考にして色々試してみますね。

通報する

お礼日時：2009/09/11 01:23

No.1

回答者： JavaJavax2
回答日時：2009/09/09 22:09

メソッド・チェーンで出来ますよ！

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます
ご回答いただいた内容がなんのこっちゃよくわからなかったので
ちょっと調べてみました。
jQueryのメソッド・チェーンという技術を使って実現できるのですね
ていうかjQueryという技術自体あまり知りませんでした＞＜
んーーなんていうかJavaScriptにCSSなどの技術を取り入れた拡張技術みたいな感じなんですかね？？？(多分)
自分は多少CSSもできると思っているので何となく取っつきやすい感じでした
がその後色々調べてみたのですがこの方法で指定位置のリンクアドレスを
変更できるメソッドがみつからなかった為もしよければそれらを紹介している参考サイトなどを教えていただけると助かります。

通報する

お礼日時：2009/09/09 23:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！