- ベストアンサー
リンク先を動的に変更する
簡単な仕様を考えて試行錯誤しながら勉強している ジャバスクリプ超初心者です どなたか宜しくお願いします <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）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- Gotthold
- ベストアンサー率47% (396/832)
A要素にidつけてgetElementByIdで取得すれば良いのでは？
お礼
ご回答ありがとうございます。 その手がありましたねうーーんまだまだ勉強中で適材適所で 使うメソッドやらプロパティーが即座に思いつかずすいません＞＜ 参考にして色々試してみますね。
- JavaJavax2
- ベストアンサー率22% (68/305)
メソッド・チェーンで出来ますよ！
お礼
ご回答ありがとうございます ご回答いただいた内容がなんのこっちゃよくわからなかったので ちょっと調べてみました。 jQueryのメソッド・チェーンという技術を使って実現できるのですね ていうかjQueryという技術自体あまり知りませんでした＞＜ んーーなんていうかJavaScriptにCSSなどの技術を取り入れた拡張技術みたいな感じなんですかね？？？(多分) 自分は多少CSSもできると思っているので何となく取っつきやすい感じでした がその後色々調べてみたのですがこの方法で指定位置のリンクアドレスを 変更できるメソッドがみつからなかった為もしよければそれらを紹介している参考サイトなどを教えていただけると助かります。
関連するQ&A
- 指定時間ごとに画像とリンク先を変えるには？
バナーが指定時間ごとに変わるページを 作りたいと思っているのですが 下記のソースではどうもうまくいきません。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=x-sjis"> <TITLE>指定時間毎に画像とリンク先を変えるには？</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" onLoad="banner()"> <SCRIPT language="JavaScript"> <!-- num=1; function banner(){ if(num==1){ document.photo.src="img/no_0.gif", document.photo.href= "http://www.test.co.jp/0"; num=2; }else if(num==2){ document.photo.src="img/no_1.gif", document.photo.href= "http://www.test.co.jp/1"; num=3; }else if(num==3){ document.photo.src="img/no_2.gif", document.photo.href= "http://www.test.co.jp/2"; num=4; }else if(num==4){ document.photo.src="img/no_3.gif", document.photo.href= "http://www.test.co.jp/3"; num=5; }else if(num==5){ document.photo.src="img/no_4.gif", document.photo.href= "http://www.test.co.jp/4"; num=6; }else if(num==6){ document.photo.src="img/no_5.gif", document.photo.href= "http://www.test.co.jp/5"; num=1; } setTimeout("banner()",5000); } //--> </SCRIPT> <a href="http://www.test.co.jp/ng" NAME="photo"><IMG SRC="img/1.jpg" NAME="photo" ALIGN="BOTTOM" WIDTH="60" HEIGHT="110" BORDER="0"></a> </BODY> </HTML> 画像は変わるのですがリンク先が変わらないようで…。 どなたかご指示をいただけないでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- クリックでリンク先の切り替え
お世話になっています。 基本かもしれませんが、どうしても分からないので質問させてください。 クリックしたときにリンク先を変更したいのです。 <script> var i=1; function change(){ i++; if(0==i%2){ document.shop_img.src="test1.jpg"; }else{ document.shop_img.src="test2.jpg"; } } </script> クリックされた回数に応じて、画像の切り替えとリンクの切り替えをしたいのです。 <a href="http://www.test.jp"><img src="test2" name="shop_img" /></a> 画像の切り替えはOKで、あとは画像を囲っているリンク先のURLをクリックするごとに切り替えしたいのですが、どうしても分かりませんでした。 分かる方、ぜひ教えてください！
- ベストアンサー
- JavaScript
- 「戻る」「進む」ボタンで画像を変えるには？
「戻る」「進む」ボタンで5枚の画像を変えられるようにしたいのですが、なかなかできません。 順番が飛んでしまったりしてしまいます。 var n=0; var imgDB=new Array("kenkyu/0.jpg","kenkyu/1.jpg","kenkyu/2.jpg","kenkyu/3.jpg","kenkyu/4.jpg"); function change(){ if(n==0)n=4; if(n==5)n=0; document.img.src=imgDB[n]; } <TABLE cellpadding="10" bgcolor="#0099cc"> <TBODY> <TR> <TD><IMG src="kenkyu/0.jpg" name="img" width="500" height="400" border="0"></TD> </TR> </TBODY> </TABLE> <A href=JavaScript:n--;change();><IMG src="kenkyu/modoru.jpg" width="96" height="28" border="0"></A> <A href=JavaScript:n++;change();><IMG src="kenkyu/susumu.jpg" width="96" height="28" border="0"></A><BR> 分かる方、教えて下さい。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- HTMLの画像のリンクについて
ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> <a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- リンク先の自動変更？について
先日まで、どの質問カテゴリが適切か解からずhtmlに投稿していまいたが 回答にてjava scriptだと教えていただいたのでこちらに再投稿させて頂きます。 先日以下の様な方法でＵＲＬの変換を行っているサイトがありました。 元々のリンク先 <a href="http://aaa.bbb.ccc/xxxxx" target="_blank"><img src="00.gif" width="100" height="60" border="0"></a> ↓ 1行テキスト領域に『yyyyy』と入力し隣の変換ボタンを押す ↓ 変換されたリンク先 <a href="http://aaa.bbb.ccc/yyyyy" target="_blank"><img src="00.gif" width="100" height="60" border="0"></a> と『xxxxx』の所が『yyyyy』に変換されました。 gifの変更もなくリンク先のみ変更というのはどの様な方法なのでしょうか？ どなたかご存知の方が居ましたら方法をご教授頂きたいと思います。
- ベストアンサー
- JavaScript
- ロールオーバーを立てに並べると隙間があいてします
ホームページのロールオーバーイメージを 立てに並べたところ どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか？ ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで画像にリンクを張りたい
HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>
- ベストアンサー
- ブログ
- リンクで画像を置き換えたい
初心者ですが、よろしくお願いします。 たとえば 001.jpg 002.jpg 003.jpg という３つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ～省略～ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像１，２，３のリンクをクリックすることで、 ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、 ご教授願いないでしょうか？ 要望としては、切替候補の複数の画像は ページをロードしたときに最初に全て読み込んでおいて、 リンククリック時の画像の切替をスピーディにしたいと考えています。 サンプルの上記例にそくしたサンプルのコードなどを 回答いただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 なるほど～子要素から親要素のIDを取得するようなメソッドもあるんですね 参考になります。 勉強してどんどん幅を増やしていきたいと思います。