- 締切済み
JavaScriptで呼び出したテキストリンクを画像にするには
Java Scriptで呼び出したテキストリンクを、画像に替えたいのですがうまくいきません。人がつくったScriptの改造なので、今ひとつわかりにくくて困っています。 ソースは function callJavascript(str) { var obj = parent.document.getElementById('maryleTVLink'); obj.innerHTML = "<a href='http://localhost:8888/cb/cframe_play.php?user=tbsv1&idx=" +str+ "' onclick=＼"return GB_myShow('MaryleTV', this.href)＼">大きく見る</a>" ; } です。 作りとしては、callJavascriptを読み込んでいる画像（Flash）をクリックすると、テキストリンクが表示される、というものです。 「大きく見る」の部分を画像のボタンにしたいのですが、 どうしたら良いか教えてください。
- nazuna_463
- お礼率33% (2/6)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- venzou
- ベストアンサー率71% (311/435)
＞「大きく見る」の部分を画像のボタンにしたいのですが、 文字の替わりに、imgタグを入れれば良いのでは？ obj.innerHTML = "<a href='http://localhost:8888/cb/cframe_play.php?user=tbsv1&idx=" +str+ "' onclick=\"return GB_myShow('MaryleTV', this.href)\"><img src='*******'></a>";
関連するQ&A
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>
- ベストアンサー
- JavaScript
- リンクする画像とテキストをくっつけるには？
ブログでHTMLタグを使いたいのですがまだよく分かりません。 テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像（写真）をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A> 私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか？ご教授願えませんか？
- ベストアンサー
- ブログ
- Javascriptでイメージの切り替えとテキストリンク操作
諸先輩方ご教授の程、よろしくお願いいたします。 少々急いでおります。 Javascriptを使用して、イメージ切り替えを行いたいと思っています。 切り替えは、テキストに仕込んだ<a>のonClick時で、 下のような感じのソースコードです。 <a href="#" onClick=" ">今日</a> <a href="#" onClick=" ">明日</a> <a href="#" onClick=" ">イベント</a> <a href="#" onClick=" ">会議</a> <img src="MainImage"> 切り替えで表示する画像は、 ・"今日"の"イベント" ・"今日"の"会議" ・"明日"の"イベント" ・"明日"の"会議" の全部で４枚です。 個々のイメージの変更は簡単にできるのですが・・困っているのは、 例えば、 "今日"の"イベント"の写真が表示されているときは、 下のように、"今日"と"イベント"にリンクが貼られていない状態にしたいのです。 （ページ読み込み時のデフォルトの状態をこの状態にしたいです） 今日 <a href="#" onClick=" ">明日</a> イベント <a href="#" onClick=" ">会議</a> <img src="MainImage"> この状態から、"明日"を選択したら、 画像の切り替えと、下のように"明日"と"イベント"にリンクが貼られていない状態にしたいです。 <a href="#" onClick=" ">今日</a> 明日 イベント <a href="#" onClick=" ">会議</a> <img src="MainImage"> うまく説明できなくて、大変申し訳ないのですが、 大変困っているので、助けていただけたら本当に助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- リンクで画像を置き換えたい
初心者ですが、よろしくお願いします。 たとえば 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
- JavaScript で汎用的なアンカーリンクを使うには？
下に続いて画像集についてですが、 一つの Web Page 内にインラインフレームが３つあり、 左に大カテゴリー、右上にサブカテゴリー、右下に 画像リストがあります。 ここで左カテゴリーのリンクをクリックすると ページが変化するのは右下の画像リストのみで、 右上のサブカテゴリーは全てのページに共通してるので 汎用的に使いたいと思います。 これを category.html とします。 ここで右上のサブカテゴリーは右下の画像リストの アンカーに対応しており、例えば category1 ～ category5 があり 右下のフレームを name="picture", その web page を list.html とするなら function change(url) { window.parent.document.picture.location.href = url; } この関数の中で こちら ↓ onclick="change('list.html#category1');" は正常に使えますが onclick="change('#category1');" とすると category.html#category1 が表示されます。 この場合 category.html を汎用的に使うことは可能でしょうか？ ちなみに、インターネットでこちらの source もみつけたんですが ここにうまく応用できません。。。 obj = document.getElementById(id_name); y = obj.offsetTop; scrollTo(0,y);
- ベストアンサー
- JavaScript
- リンクをクリックしたときの表示位置について
リンクテキストをクリックすると、<style="display:none;">を指定して 隠しているテキスト群を表示させるJavascriptを使用しています。 リンクテキストがページ全体の中央くらいにあるのですが、クリックしてテキスト群を表示させると、テキスト群が表示されると同時に一番上までページの表示位置が移動してしまいます。 ページの表示位置を変えずに、隠れているテキスト群を表示させるにはどうしたらよいのでしょうか？ お分かりになる方がいらっしゃいましたらお教え下さい。 よろしくお願い致します。 使用しているソースです。 <script type="text/javascript"> <!-- function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } // --> </script> <a href="#" onClick="show('sub1')">テキストリンク</a> <!--隠れているテキスト群--> <ul id="sub1"> <li>テキスト</li> </ul>
- ベストアンサー
- JavaScript
- JavaScriptでリンクを設定したい
JavaScript超初心者です。 サイトで画像やテキストリンクが1ページにとても多く、 リンクアドレスも同一のものが数か所あります。 JavaScriptでリンクを設定すれば、リンクだらけにならないと聞いたので 使ってみようと思ったのですが、上手くいきません。 http://www.openspc2.org/reibun/javascript/link/020/ こちらのサイトを参考にやってみたのですが、 テキストリンク1カ所はできました。 でも、画像リンクはnullと表示されて画像も表示されなくなり、 2個目のテキストリンクはリンクになりません。 <a href="./aaa.html"><img src="./img/aaa.jpg" /></a> <a href="./aaa.html">あああ</a> <a href="./bbb.html"><img src="./img/bbb.jpg" /></a> <a href="./bbb.html">いいい</a> <a href="./aaa.html"><img src="./img/ccc.jpg" /></a> <a href="./aaa.html">ううう</a> このように表示されているリンクを JavaScriptでリンクを設定するにはどうしたらよいでしょうか？ よろしくお願いします！
- 締切済み
- ブログ
- innerHTMLの初期値
下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。
- ベストアンサー
- JavaScript
- javascriptで画像の移動
お世話になります。 画像をクリックすると、クリックした画像のaltの内容をinput type="text"に表示する。 左に移動ボタン押下でクリックされた画像を１つ左に移動、 右に移動ボタン押下で１つ右に移動する。 １．移動ボタン押下で移動させるにはどうすればよいでしょうか？ ※HTMLはtableタグでなくてもよいと思っております。 ２．クリックした画像が分かるようにしたいのですが 何かいい方法などありますでしょうか？ <html> <head> <script> var clickId =""; function down(id){ clickId = id; document.getElementById("comment").value = document.getElementById(id).alt ; } function move(d){ } </script> </head> <body> <table> <tr> <td id="p1"><a href="#" onClick="down('1');"><img id="1" alt="alt1" src="1.gif" /></a></td> <td id="p2"><a href="#" onClick="down('2');"><img id="2" alt="alt2" src="2.gif" /></a></td> <td id="p3"><a href="#" onClick="down('3');"><img id="3" alt="alt3" src="3.gif" /></a></td> </tr> <tr> <td align="left"><a href="#" onClick="move('1');"><img alt="左に移動" src="L.gif" /></a></td> <td align="right"><a href="#" onClick="move('0');"><img alt="右に移動" src="R.gif" /></a></td> </tr> </table> <input type="text" id="comment" /> </body> </html>
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
お礼
うまく行きました、ありがとうございます。 Java Scriptを書きなれていなかったので、<img src='*******'>を<img src="*******">で書いてしまってました。 思いっきりうつけ者でしたが、本当に助かりました！！