簡単な仕様を考えて試行錯誤しながら勉強している
ジャバスクリプ超初心者です
どなたか宜しくお願いします
<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)" />
No.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>
ご回答ありがとうございます。
なるほど~子要素から親要素のIDを取得するようなメソッドもあるんですね
参考になります。
勉強してどんどん幅を増やしていきたいと思います。
No.2
- 回答日時:
A要素にidつけてgetElementByIdで取得すれば良いのでは?
ご回答ありがとうございます。
その手がありましたねうーーんまだまだ勉強中で適材適所で
使うメソッドやらプロパティーが即座に思いつかずすいません><
参考にして色々試してみますね。
No.1
- 回答日時:
メソッド・チェーンで出来ますよ!
ご回答ありがとうございます
ご回答いただいた内容がなんのこっちゃよくわからなかったので
ちょっと調べてみました。
jQueryのメソッド・チェーンという技術を使って実現できるのですね
ていうかjQueryという技術自体あまり知りませんでした><
んーーなんていうかJavaScriptにCSSなどの技術を取り入れた拡張技術みたいな感じなんですかね???(多分)
自分は多少CSSもできると思っているので何となく取っつきやすい感じでした
がその後色々調べてみたのですがこの方法で指定位置のリンクアドレスを
変更できるメソッドがみつからなかった為もしよければそれらを紹介している参考サイトなどを教えていただけると助かります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptを使って画像を切り...
-
外部javascriptの重複を防ぐには
-
Vb.net2005での画像の合成方法
-
外部ファイルにしたら文字化け...
-
期間指定
-
error LNK2019 未解決のシンボ...
-
【OpenCV】二値画像後、白の部...
-
画像ファイルをアップロードす...
-
Iplimageについて
-
MAX関数を使ってからLEFT JOIN...
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
jQueryスライドショー画像への...
-
c++std::string型をTCHARに変換...
-
JQueryタブのアクティブ アン...
-
画像のランダム表示が遅い?
-
jquery ドロップダウンメニュー...
-
クリックすると下に説明文が出...
-
フラッシュの様に
-
マウスオーバーで他の2個の画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
画像が表示でnull; this.src
-
外部javascriptの重複を防ぐには
-
libjpegライブラリの使い方につ...
-
MFCで画像を表示させているので...
-
条件分岐でキーが入力されてい...
-
【OpenCV】二値画像後、白の部...
-
外部ファイルにしたら文字化け...
-
error LNK2019 未解決のシンボ...
-
jqueryスライドショーをストッ...
-
Vb.net2005での画像の合成方法
-
複数の画像をフェードイン・ア...
-
複数画像のランダム複数表示(...
-
ラズパイでno module named zbar
-
OpenCV 2値化について
-
リンク先を動的に変更する
-
HTMLからimgのsrcのみを正規表...
-
nodejsの画像表示は特別なこと...
-
jqueryのスライドショー。html...
-
onclickで画面が固まる・・・ら...
おすすめ情報