• ベストアンサー

特定の場所を指定して切り替え

例えば、次のようなタグがあるとします。 <table cellspacing="0" cellpadding="0" width="75%" border="1"> <tr> <td id="a">(1)</td> <td id="b">(2)</td> </tr> </table> このとき、idがaのセルに別のページを読み込ませるのは可能なのでしょうか？ 画像のときのように、 <img src="aaa.png" id="img"> <a href="#" onClick="chenge()">次へ</a> <script language="JavaScript"> var num=1; <!-- function chenge(){ num=num+1; img.src="Illustration/illustration-"+num+".png"; } //--> </script> みたいな感じで切り替えたいのですが・・・

質問者が選んだベストアンサー

  • ベストアンサー
noname#84373
noname#84373
回答No.2

http://javascriptist.net/ref_prototype/element.update.html

その他の回答 (1)

回答No.1

「Ajaxとは」で検索してみて下さい。

if-so-at
質問者

お礼

ご回答ありがとうございます。 検索した結果、たぶん自分のしたいことは『非同期通信』のことだな～ っと分かりました。 しかし、いまいち理解できません。 http://ajax.pgtop.net/category/4479851-1.html を参考にさせていただいているのですが、 よくよく考えると、このページのような構成にしたいのです。 全部のページにメニューのリンクを書いているわけではないと思いますので。 どの部分を理解していけばよいのでしょうか。 ご教授の方をお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • オブジェクトを指定してください、のエラーについて

    HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif">&nbsp;</td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>

  • 助けてください＞＜IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の１ｐｘがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • テーブルとテーブルの間の隙間

    以下の様なHTMLでIE６で表示した場合、●Aと●Bの間に、微妙な隙間が入ってしまいます。 どうやっても隙間が無くなりません。 ●Aの部分には、画像がランダムに表示されるようなスクリプトを記述していますが、 そのスクリプトを削除したら、ちゃんと隙間が無くなるのです(^^;) これって方法はありますか？どうにかランダムに表示させたいので、アドバイス下さい。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script language="javascript" src="../js/top.js"></script> </HEAD> <BODY topmargin="0"> <DIV align="center"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> ●A <TR> <TD width="800"><SCRIPT LANGUAGE="JavaScript">random_img2()</SCRIPT> <noscript><IMG src="../img/1.jpg" alt="" width="800" height="300"></noscript></TD> </TR> ●B <TR> <TD width="800"><A href="../index.html">HOME</A>　&gt;&gt; TEST</TD> </TR> </TBODY> </TABLE> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ※実際のHTMLには●Aと●Bという文字は入っておりません。 以下はtop.jsで記述している内容です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ function random_img1(num1,num2) { if((num1 - num2) > 0) { var big = num1 var small = num2 } else { var big = num2 var small = num1 } var range = big - small + 1 var number = Math.floor(Math.random()*range) + small return(number) } function random_img2() { var img_src = "../img/" + random_img1(1,3) + ".jpg" document.write("<IMG SRC='" + img_src + "'>") } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

    • ベストアンサー
    • HTML
  • 画像をクリックして別の画像を表示させたい

    現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。

  • オンマウスで画像と文字を同時に任意の位置に表示したい

    絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される 　（何も記載されていない位置に表示されるようにしたいです） 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!--　↓ここからBODY　--> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10">　</Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!--　↑ここまでBODY　--> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。

  • vbsでＩＥの操作

    ｖｂｓでＩＥの自動操作を行おうとしているのですが，最後のボタンだけなぜか押せません． オブジェクトが存在しないとエラーになります． 下記は操作しようとしているところのソースです． <div id="layerPanelSessions" style="display:"> <table cellpadding="1" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr bgcolor="#EEEEEE"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td> <table cellpadding="4" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td><img src="/dana-cached/imgs/icn18x18SessionNC.gif" alt="ネットワークコネクト" width="18" height="18" border="0"></td> <td width="100%">ネットワークコネクト <br><span class="cssSmall">システム トレイに [ネットワーク コネクト] アイコンが表示されて「接続」となっていると、ネットワーク上でセキュアにアプリケーションにアクセスすることができます。<br> <br>そうでない場合はネットワーク コネクトの [セッションの開始] アイコンをクリックして接続します。</span> </td> </tr> </table> </td> <td align="right"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="6"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> <tr> <td bgcolor="#EEEEEE" nowrap ><img src="/dana-cached/imgs/space.gif" width="10" height="10"> <input name="btnNCStart" type="button" value="開始" onclick="self.location='/dana/nc/ncrun.cgi?launch_nc=1'; return false;"></td> <td><img src="/dana-cached/imgs/space.gif" width="5" height="1"></td> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> <td bgcolor="#EEEEEE"><img src="/dana-cached/imgs/btnPanelItemBlank.gif" alt="" width="20" height="20" border="0"></td> <td><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> で，下記が操作用の私が作成したコードです． .Document.all("btnNCStart").Click 本当に困っています．どなたかよろしくお願いいたします．

  • table要素の使い道

    tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>

    • ベストアンサー
    • HTML
  • css

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。

    • ベストアンサー
    • CSS
  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する