- ベストアンサー
リンク先を動的に変更する
簡単な仕様を考えて試行錯誤しながら勉強している ジャバスクリプ超初心者です どなたか宜しくお願いします <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)" />
- toosanba
- お礼率100% (3/3)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
リンク要素に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>
その他の回答 (2)
- Gotthold
- ベストアンサー率47% (396/832)
A要素にidつけてgetElementByIdで取得すれば良いのでは？
お礼
ご回答ありがとうございます。 その手がありましたねうーーんまだまだ勉強中で適材適所で 使うメソッドやらプロパティーが即座に思いつかずすいません＞＜ 参考にして色々試してみますね。
- JavaJavax2
- ベストアンサー率22% (68/305)
メソッド・チェーンで出来ますよ！
お礼
ご回答ありがとうございます ご回答いただいた内容がなんのこっちゃよくわからなかったので ちょっと調べてみました。 jQueryのメソッド・チェーンという技術を使って実現できるのですね ていうかjQueryという技術自体あまり知りませんでした＞＜ んーーなんていうかJavaScriptにCSSなどの技術を取り入れた拡張技術みたいな感じなんですかね？？？(多分) 自分は多少CSSもできると思っているので何となく取っつきやすい感じでした がその後色々調べてみたのですがこの方法で指定位置のリンクアドレスを 変更できるメソッドがみつからなかった為もしよければそれらを紹介している参考サイトなどを教えていただけると助かります。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 なるほど～子要素から親要素のIDを取得するようなメソッドもあるんですね 参考になります。 勉強してどんどん幅を増やしていきたいと思います。