写真の下に説明文を表示する方法
- アルバムのページで写真の下に説明文を表示する方法について教えてください。
- 検索してもそのような方法が見つからず、困っています。
- 写真をクリックすると中央に拡大表示され、その下に説明文を表示したいです。
- ベストアンサー
写真の下に説明文
こんにちは。 今アルバムのページを作っています。 右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。 拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。 だいぶ略してますが、下記のようなソースを使って作りますよね？これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。 <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; function startimg(I){ document.image.src=I; } //--> </script> ＝中略＝ <table> <tr> <td align=center> <table border =1> </td> </tr> <tr> <td align=center> <img src="../gif/●.jpg" name="image"> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> 宜しくお願いします。
- greensnow
- お礼率58% (7/12)
- レンタルサーバ・ASP
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 では、こんな感じでしょうか↓ <html> <head> <script type="text/javascript"> <!-- var img01 = "../gif/japan.jpg"; var txt01 = "日本"; var img02 = "../gif/france.jpg"; var txt02 = "フランス"; var img03 = "../gif/germany.jpg"; var txt03 = "ドイツ"; function startimg(I,J){ document.image.src=I; document.all.txt.innerText = J ; } //--> </script> </head> <body> ＝中略＝ <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/japan.jpg" name="image"><br> <div id="txt">日本</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01,txt01)"> <img src="../gif/japan.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img02,txt02)"> <img src="../gif/france.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img03,txt03)"> <img src="../gif/germany.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> </body> </html>
その他の回答 (2)
- gura_
- ベストアンサー率44% (749/1683)
こんな感じでしょうか <html> <head> <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; var txt01 = "クリック後 説明文"; function startimg(I){ document.image.src=I; document.all.txt.innerText = txt01; } //--> </script> </head> <body> ＝中略＝ <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/●.jpg" name="image"><br> <div id="txt">クリック前</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> <BR>上図をクリック </td> </tr> </table> </td> </tr> </table> </body> </html>
補足
どうもありがとうございます。これです、私が求めていた物は！これを応用して写真が複数の時をやってみたんですが、うまくいきません。説明文が全て「ドイツ」になってしまうんです。どこがおかしいのでしょうか？引き続きご教示いただければ幸いです。 <html> <head> <script type="text/javascript"> <!-- var img01 = "../gif/japan.jpg"; var txt01 = "日本"; var img02 = "../gif/france.jpg"; var txt02 = "フランス"; var img03 = "../gif/germany.jpg"; var txt03 = "ドイツ"; function startimg(I){ document.image.src=I; document.all.txt.innerText = txt01; document.image.src=I; document.all.txt.innerText = txt02; document.image.src=I; document.all.txt.innerText = txt03; } //--> </script> </head> <body> ＝中略＝ <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/japan.jpg" name="image"><br> <div id="txt">日本</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/japan.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img02)"> <img src="../gif/france.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img03)"> <img src="../gif/germany.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> </body> </html>
- rika3714
- ベストアンサー率39% (47/119)
ソースをコピーしてhtml形式で確認してみました。 <img src="../gif/●.jpg" width="130" height="100"></a> <BR>説明文</td> </tr> </table> <a></td>の間に<BR>を説明文と入力すると 一応写真の下に説明文出ることは出るんですが・・・
お礼
どうもありがとうございます。 私もこのやり方はやってみたんですが、これですと縮小写真の下に説明が表示されますよね？拡大された写真の下に表示したいんです。 そのやり方はご存じないでしょうか？
関連するQ&A
- tdの中のbackgroundを繰り返しにしたくない
webページをテーブルで組んだとき、1つだけのtd内にbackgroundを設定しているのですが、縦や横に長くなったときに、同じ画像が繰り返し表示されます。そこで、どのようにして繰り返しをなくせばいいのでしょうか？因みに、 <table> <tr> <td colspan="2" align="center"> <img src="aaa.gif"></td> </tr> <tr> <td rowspan="2" background="bbb.jpg"> </td> <td align="center"> <img src="ccc.gif"></td> </tr> <tr> <td align="center"> <img src="ddd.gif"></td> </tr> </table> 上記HTMLで、bbb.gifにあたります。 どなたかご存知な方は教えてください。お願いします。
- ベストアンサー
- HTML
- スライドショー
初めまして、ちゃりおと申します。 JavaScript初心者です。 あるページに静止画（.jpg）が３枚あって、それらをクリックするとアニメGIFにきりかわってスライドショーが始まる、という簡単なスクリプトをつくってみました。 ただ、これだと静止画の数が増えた場合に保守効率が悪くなってしまいます。JavaScriptを使うにしても、同じ機能を実現するためにもっとスマートな方法はないものでしょうか？ 諸先輩方、お知恵をおかしください。 //スクリプトここから <html> <head> <title>slideshow</title> <script language="javascript"> <!-- function autoslide_aisa(){ document.n_aisa.src = "img/aisa_anime.gif"; } function autoslide_ann(){ document.n_ann.src = "img/ann_anime.gif"; } function autoslide_mipori(){ document.n_mipori.src = "img/mipori_anime.gif"; } // --> </script> </head> <body BGCOLOR="#FFFFFF"> <table border="0" cellpadding="0" cellspacing="0" width="80%" align="center"> <tr> <td align="center" valign="bottom"> <a href="javascript:autoslide_aisa()"><img src="img/aisa1.jpg" name="n_aisa" border="0" align="bottom"> </a> </td> <td align="center"> <a href="javascript:autoslide_ann()"><img src="img/ann1.jpg" name="n_ann" border="0"> </a> </td> <td align="center"> <a href="javascript:autoslide_mipori()"><img src="img/mipori1.jpg" name="n_mipori" border="0"> </a> </td> </tr> </table> </body> </html> //スクリプトここまで
- 締切済み
- JavaScript
- 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。
どちらも<table align="center">を用いています。 ですが、タグ１は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ２のセルの中身は、中央ぞろえになってしまいます。 タグ１のように、<table align="center">を用い、セルを左詰め指定（<align="left">）をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ１------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10"> </td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ２------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td> </td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td> </td> <td> </td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。
- ベストアンサー
- 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です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅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
- ホームページの画像が表示されない
宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記のHTMLは間違って居りますでしょうか困って居ります <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- aaa!cafeにて
リンクが表示されないのです。 <html> <body bgcolor="black" link="red" vlink="glay"> <font color="white"> <title>リンク</title> <table align="center"> コメント </table> </p> <hr> <table border="1" width="90%" align="center"> <STYLE TYPE="text/css"> <!-- td{ color: white; } --> </STYLE> <tr> <td colspan="3" align="center"><font color="yellow">コメント</font></td> </tr> <tr> <td align="center"><img src="link_banner/search_the_bass.jpg"></td><td align="center"><a href="アド">サイト</a></td> <td>コメント</td> <tr> <td align="center"><img src="link_banner/fun.gif"></td><td align="center"><a href="アド">サイト</a></td> <td></td> </tr> <tr> <td colspan="3" align="center"><font color="aqua">お役立ちサイト</font></td> </tr> <tr> <td align="center"><img src="link_banner/manbo_bass.gif"></td><td align="center"><a href="http://degu.***.org/ranking/bass/autorank/rankem.cgi?action=in&id=sunsurf" target="_new">Bass Site Ranking</a>ココが表示されません</td> <td>コメント</td> </tr> <tr> <td align="center"><img src="link_banner/nanikiru_s5.gif"></td><td><a href="http://www.***.net/">なにきる．ねっと</a></td> <td>コメント</td> </tr> </table> </body> </html> ココが表示されません、というとこなんです。<a href～がサーバにアップすると消えるんです。 悩みの種です・・・。よろしくお教えください！
- ベストアンサー
- レンタルサーバ・ASP
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
- ホームページに写真の貼り付け方
初めてホームページを作成していてつまずいてしまいました。 写真を50枚ほど貼り付けて、クリックしたら写真の拡大が出るという形のものを作りたいのですが、いい方法ありましたら教えてください。 現在は <TABLE> <TR> <TD><A HREF="写真の場所.JPG"><IMG SRC="写真の場所.JPG" WIDTH="120" HEIGHT="120"></A></TD> <TD> ・・・・ </TD> </TR> </TABLE> という具合にテーブルに写真を入れて作ってるのですが、写真の表示速度が非常に遅いのと、途中から写真が10～15枚目（コンピュータを起動した毎に違う）から写真が表示されなく枠組みだけが表示されるようになってしまいます。(枠組みの左上に×が表示されています。） よろしくお願いします。
- ベストアンサー
- HTML
- Netscape：画像の下に隙間が生じてしまう
Macintosh,Netscape7.02においてご質問です。 <table width="100" height="20" boder="0"> <tr> <td align="center" background="img/bg.gif" height="30"> <img src="img/photo.gif" width="45" height="30"> </td> </tr> </table> とした場合、photo.gifの下に2pixcel程度の隙間が生じます。この隙間をなくしたいんですが、 色々検索してもよい解決策が見つかりませんでした。 解決策を知ってる方、教えて下さい。よろしくお願いします。
- ベストアンサー
- HTML
お礼
お返事遅くなり申し訳ありませんでした。 コピー＆パースとして試してみたところ、思っていた通りのものが出来ました！ 何度もありがとうございました。